dropdown under a nav button css/html - css

Question

I have a navcontainer with buttons in the container. I need to make a dropdown list for only one of the buttons. How would this be accomplished with CSS/HTML. Here is my code:
HTML:
<div id="navcontainer">
About Us
Request a Quote
Affiliates
Pricing & Plans
Additional Services
Service Details
Watering
</div>
CSS:
#navcontainer {
float: right;
width: 1040px;
height: 45px;
text-align: center;
line-height: 45px;
color: #fff;
margin-bottom: 6px;
}
.button {
text-align: center;
background: #226426;
color: #fff;
width: 100px;
height: 45px;
float: left;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: bold;
border-right: solid 1px #91b293;
border-top: solid 1px #91b293;
border-bottom: solid 1px #91b293;
}
Do I need to make this into a ul or can I keep it as is, and just add a dropdown to the Services button? Thanks for your help.

Answer 1

As a general rule, it's always a good idea to have your navigation in a list, it helps keep your options open to a multidimensional menu system at any point. Here is what I would do:
HTML
<ul id="nav">
<li>link 1</li>
<li>link 2
<ul>
<li>sublink 1</li>
<li>sublink 2</li>
</ul>
</li>
<li>link 3</li>
</ul>
CSS
#nav, #nav ul {list-style: none; margin: 0; padding: 0;}
#nav li {position: relative;}
#nav li ul {position: absolute; top: 100%; left: 0; display: none;}
#nav li:hover ul {display: block;}
jQuery - optional
This is if you wanted some sort of effect on the
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: none"}).show(800);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
Hope this helps.