Menu horizontal em lista

Aprendendo a fazer um Menu horizontal com listas

HTML

<div id=”menu”>
<ul id=”menuList”>
<li id=”active”><a href=”#”>Item 01 </a></li>
<li><a href=”#”>Item 02 </a></li>
<li><a href=”#”>Item 03 </a></li>
<li><a href=”#”>Item 04 </a></li>
<li><a href=”#”>item 05 </a></li>
</ul>
</div>

CSS

/* CONTENEDOR DEL MENU*/
#menu {
margin:25px 0px 0px 0px;
padding:0px;
border-bottom:4px solid #000;
}

/* LISTA DEL MENU */
#menuList {
list-style-type: none;
padding:0px 0px 24px 30px;
margin: 0px;
}

/* OPCIONES DEL MENÚ */
#menuList li {
float: left;
height: 24px;
margin: 0px 1px 0 1px;
}

/* LINKS GENERALES EN EL MENÚ*/
#menuList a {
float: left;
display: block;
text-decoration: none;
padding: 5px 15px 5px 15px;
}

#menuList a:link,
#menuList a:visited {
background-color:#CCC;
color: #333;
}

#menuList a:hover {
background: #333; color:#FFF;
}

/* OPCION ACTIVA */
#menuList li#active a:link,
#menuList li#active a:visited {
background-color: #000;
color:#FFF;
}

#menuList li#active a:hover {
background-color:#A90000;
color: #FFF;
}

Exemplo

Fonte: http://www.infectedfx.net