CSS Drop Down

Sample 2:

 

The CSS for this one is even more simple, but harder to understand. Essentially all the drop downs are there, but they are hidden UNTIL you hover over top the main links. Then you can see them.

This uses an ID on the main bulleted list called #nav AND a class called .drop.

CSS to copy and paste into your document:

/*---- CROSS BROWSER DROPDOWN MENU ----*/
ul#nav
{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0px;
}
ul.drop a {
display:block;
color: #fff;
font-family: Verdana;
font-size: 14px;
text-decoration: none;}

ul.drop, ul.drop li, ul.drop ul {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #fff;
background: #555;
color: #fff;}

ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
padding: 5px 10px; }

ul.drop li.hover, ul.drop li:hover {
position: relative;
background: #1e7c9a; }

ul.drop ul {
visibility: hidden;
position: absolute;
left: 0;
width: 195px;
background: #555;
border: 1px solid #fff;
top: 100%;
}

ul.drop ul li { float: none; }

ul.drop ul ul { top: -2px; left: 100%; }

ul.drop li:hover > ul { visibility: visible }

Based on the CSS Dropdown Tutorial at HTMLHandy.