CSS Drop Down

Sample 1:

 

Note: this menu is set up in a UL (NOT a div) with an ID called #navigation.

The persistent navigation buttons are in the main list items, and they use a class called .sub. All of the list items are also linked. The drop down menu appears AS you hover over the main links.

CSS to copy and paste into your document:

/* Navigation */
#navigation {
margin: 0;
padding: 0 1em;
height: 3em;
list-style: none;
background-color: #dddddd;
}

#navigation > li {
float: left;
height: 100%;
margin-right: 0.5em;
padding: 0 1em;
}

#navigation > li > a {

height: 100%;
color: #006;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;

}

#navigation > li > a:hover {
color: #666;
text-decoration: underline;

}

/*Contextual positioning */
#navigation > li.sub {
position: relative;
}
#navigation > li.sub ul {
width: 10em;
margin: 0;
padding: 0.5em 0;
list-style: none;
position: absolute;
top: -1000em;
background-color: #036;
}

#navigation > li.sub ul li {
width: 90%;
margin: 0 auto 0.3em auto;
}

#navigation > li.sub ul li a {
height: 100%;
padding: 0.4em;
color: #fff;
font-weight: bold;
text-decoration: none;
}

#navigation > li.sub ul li a:hover {
text-decoration: underline;
background-color: #066;
}

#navigation > li.sub:hover ul {
top: 3em;
}

Based on the CSS Dropdown Tutorial at WebDev.