How to create simple horizontal dropdown CSS menu bar ?

Would you please give me advice, how to create a simple horizontal hover dropdown menu bar, using HTML and CSS ?

Hi,

I have a good experience with this CSS solution:



<style>

ul#menu, ul#menu ul.sub {
padding:0;
margin: 0;
}

ul#menu li {
list-style-type: none;
display: block;
float: left;
}

ul#menu ul.sub li {
list-style-type: none;
display: block;
}

ul#menu li a {
display: block;
text-decoration: none;
color: #FFFFFF;
font-family: Arial;
font-weight: normal;
font-size: 13px;
padding: 0px 15px 0px 15px;
line-height: 38px;
}

ul#menu li ul.sub li a {
display: block;
text-decoration: none;
color: #FFFFFF;
font-family: Arial;
font-weight: normal;
font-size: 13px;
float: left;
width: 150px;
padding: 0px 15px 0px;
line-height: 36px;
}

ul#menu li {
position: relative;
}

ul#menu li ul.sub {
display: none;
position: absolute;
top: 38px;
left: 0;
width: 100px;
}

ul#menu li:hover ul.sub {
display: block;
}

.cat {
background-color: #005680;
}

a.cat:hover {
background-color: #0082BF;
}

.subcat {
background-color: #006595;
}

a.subcat:hover {
background-color: #0082BF;
}

</style>

<ul id='menu'>

<li><a href='' class='cat'>Item 1</a>
<ul class='sub'>
<li><a href='' class='subcat'>Subitem A1</a></li>
<li><a href='' class='subcat'>Subitem B1</a></li>
<li><a href='' class='subcat'>Subitem C1</a></li>
</ul>
</li>

<li><a href='' class='cat'>Item 2</a>
<ul class='sub'>
<li><a href='' class='subcat'>Subitem A2</a></li>
<li><a href='' class='subcat'>Subitem B2</a></li>
<li><a href='' class='subcat'>Subitem C2</a></li>
</ul>
</li>

<li><a href='' class='cat'>Item 3</a>
<ul class='sub'>
<li><a href='' class='subcat'>Subitem A3</a></li>
<li><a href='' class='subcat'>Subitem B3</a></li>
<li><a href='' class='subcat'>Subitem C3</a></li>
</ul>
</li>

</ul>

The menu is widely supported and the source code is quite simple.