Dropdown menu

[MakeAWish]

Hallo,

Ik ben bezig met het maken van een eigen website en het loopt tot nu toe allemaal prima. Alles heb ik al, alleen nog wat details en extra's. Een van die dingen is een dropdown menu. Ik heb al een menu, precies zoals ik hem wil, maar nu nog dropdown. En hierbij maakt het me niet uit of je er eerst op moet klikken of alleen met je muis eroverheen moet gaan.
Dus, al klik je op home/een item/contact, dan wil ik dat er een vak uitschuift met nieuwe opties om op te klikken. (het is een horizontaal menu, voor het geval je die info nodig hebt)
Ik heb al het een en ander geprobeerd, maar het lukt maar niet.
Kan iemand mij helpen?

Alvast bedankt!


HTML
<div id="menu_panel">
<div id="menu_section">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>

CSS

#menu_panel{
width: 100%;
height: 45px;
margin: 0 auto;
background: url(images/templatemo_menu_bg.gif) repeat-x;
background-color: #0c0600;
}

#menu_panel #menu_section{
width: 930px;
height: 45px;
margin: 0 auto;
padding: 0 0 0 30px;
color: #FFFFFF;
}

#menu_section ul {
float: left;
width: 930px;
margin: 0;
padding: 8px 0 0 0;
list-style: none;
}

#menu_section ul li{
display: inline;
}

#menu_section ul li a{
float: left;
width: 110px;
padding: 5px 0;
margin-right: 5px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #ffffff;
border-bottom: 3px solid #472400;
}

#menu_section li a:hover, #menu_section li .current{
color: #ffffff;
border-bottom: 3px solid #703901;
}