Nigerian forum: Programming/webmasters - webdesigners world
Share this topic
22 Mar 2015 22:13

share tips on webdesign
problems solver interaction BTW webmaster

22 Mar 2015 22:17

You would have seen many websites having attractive menu
bars, when you mouse hover menu items then they display
details. It looks really good as well as user friendly as user
will get to know more as he enters that menu area. Most
of these menu bars are animated and designed using flash.
But using flash in websites has some disadvantages

22 Mar 2015 22:20

I wanted a quick dropdown for my
website navigation that wasn't scripted,
and zero flash. After reading about it, I
drilled the code down to only the basics
so I could build from that.
So, without further ado, the code below
is the CSS-only dropdown menu styled
just enough to make the concept look like
something you'd expect to use:
HTML
Quote:
<ul id="dropdown">
<li><span>MENU1</span>
<ul>
<li><a href="#">MENU ITEM 1</a></li>
<li><a href="#">MENU ITEM 2</a></li>
</ul>
</li>
<li><span>MENU2</span>
<ul>
<li><a href="#">MENU ITEM 1</a></li>
<li><a href="#">MENU ITEM 2</a></li>
</ul>
</li>
<li><span>MENU3</span>
<ul>
<li><a href="#">MENU ITEM 1</a></li>
<li><a href="#">MENU ITEM 2</a></li>
</ul>
</li>
</ul>
CSS
Quote:
ul,li{margin:0;padding:0;}
#dropdown{
list-style-type: none;
margin:50px auto 0 auto;
text-align:center;
width: 303px;
}
#dropdown li{
background-color:#777;
border-right:1px solid #fff;
float:left;
height:25px;
line-height:25px;
width:100px;
}
#dropdown li > ul{
background-color:#777;
display:none;
height:52px;
list-style-type: none;
}
#dropdown li:hover > ul{
display: block;
}
#dropdown li:hover > ul li, #dropdown li:active > ul li{
border-top: 1px solid #fff;
float:left;
height:25px;
}

22 Mar 2015 22:26

Several people have inquired about how to correctly use
floats (e.g. How to float divs with in divs on a page).
The code below show a simple layout for floating three The code below show a simple layout for floating three The code below show a simple layout for floating three The code below show a simple layout for floating three The code below show a simple layout for floating three The code below show a simple layout for floating three The code below show a simple layout for floating three The code below show a simple layout for floating three divs
inside a container.
**Please note this layout is not limited to divs, floats can
be used with a wide variety of page elements (P, UL,

23 Apr 2015 11:06

Hello av u heard abt the new text editor CALLED SUBLIME start using it oo it light and good

23 Apr 2015 11:07

What ur challenges on webdesign post here

3 May 2015 00:01
Post is hidden!