Create a cool CSS-based drop-down menu
August 25th, 2009
by Zeeshan
Surfing the web one finds many different solutions for drop-down menus, of which many involve or even solely depend on JavaScript. I would like to present another option which I personally find really cool because it’s easy to use and utilizes features within the HTML and CSS standards without any weird workarounds.
The example in this article will render a simple horizontal menu with submenus that are displayed when you move the mouse over the menu.
ยป You can see a live example here
Let me start by introducing you to the HTML code of the menu. It is structured as nested lists so that even displaying the HTML source code without any CSS style will render it with a useful structure.
The next step is adding the CSS styles that will make the menu look good and provide the effect of showing/hiding the submenus. Note the “magic” that comes from using :hover.
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
That’s actually it. Now you’re up and running and can modify the CSS to fit your website’s layout.
Have fun with your new menu 
PS: For simplicity this tutorial was held very brief. However, there are more additions that could be made. For example adding a different style for the currently active page, or JavaScript to support more browsers like IE6 and IE8.
