Drop down menus aren’t very hard to make, especially with CSS. If take a look at how it works, all it does is show up when you hover the mouse over a button and disappear when you move the mouse away.
So it mustn’t be that hard to make one right? Correct. I bet anyone with basic knowledge in HTML and CSS can build it in under 10 minutes or you can have your money back, oh we don’t have any money involved here, too many tele ads I guess. When we’re done the finished product would look something like this 
.
We can do it using a few unordered lists and a maximum of six CSS rules. Don’t believe me, look at the code. This is what our markup code should be.
<ul id=”menu”>
<ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
Menu 1</ul>
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
Menu 2</ul>
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
Menu 3</ul>
</li>
</ul>
See what happened up there? We have a main <ul> tag with id named menu, each sub <ul> tags are treated as the visible part of the menu and sub-sub
<ul> tags under the them are hidden, they’re the drop down part of the menu. But markup alone doesn’t do anything we need CSS to do its thing here.
Alright, so what kind of CSS voodoo do we use do make some element disappear? Aha, display: hidden or display: none . But we’re gonna be using display:none because the hidden property seems to function weird on some browsers. Now that we’ve managed to hide the “drop down” menu’s we need to find some way to make them re-appear once mouse is hovered over the main menu. That is when someone hovers the mouse over menu 1, 2 or 3, we need the ul with items 1, 2 and 3 to appear. Thats when :hover comes into play. Its the property of CSS that lets us do something when mouse is hovered over an element. Our drop down menu’s done. The CSS part of the menu looks like this.
*{padding:0px;margin:0px;}
#menu{float:left;padding:0px;}
#menu ul{background:#131313;color:#ffffff;text-align:center;
background:url(menub.jpg);border-left:1px solid #343434;float:left;
padding:3px;list-style:none;width:100px;}
#menu ul ul{display:none;position:absolute;background:#131313;
color:#ffffff;text-align:center;padding:0px;margin:-4px;border:none;
width:100px;padding:4px;}
#menu ul ul li{float:left;border:1px solid #343434;width:99px;
clear:both;}
#menu ul:hover ul{display:block;}
#menu ul ul li:hover{background:url(hovb.jpg);color:#131313;
border:1px solid #fdae16}
Told you, easy peasy . Are the 10 minutes over yet? Make it 20 if it is.
The ie6 fix
Sorry it took me this long to update this. Looks like ie6, Microsoft’s wrath on mankind doesn’t know how to handle the :hover property in CSS. One solution for this will be that everyone switch to another way cooler browser like firefox chrome or opera, nah just kidding , that’s easier said than done. So lets see what we can do with some javascript using onmouseover, onmouseout events and setAttribute function. I was trying to keep pure from any script, but
file: menu.js
