Toma, aqui tienes un ejemplo.. este es el codigo CSS + El Javascript para que funcione..
Código HTML:
<style type="text/css">
#nav {
font-family:Verdana;
font-size:12px;
font-weight:bold;
color:white }
#nav a:link, a:visited {
text-decoration:none;
font-family:Verdana;
font-size:12px;
font-weight:bold;
color:white }
ul {
list-style: none;
margin:0}
li {
float:left;
position:relative;
padding: 0 20px 0 0;
width:auto;
text-align:left;
cursor:default;
background-color: #CC0000 }
li ul {
display:none;
position:absolute;
top: 100%;
left: 0;
font-weight:none;
margin:0; }
li li {
float:none;
border-bottom: 1px solid #000099;
background: #E1E9ED;
width: 146px;
padding-left:3px; }
li ul ul {/*second level dropdown*/
margin: -2em 0 0 172px; }
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;}
li:hover ul, li.over ul {
display:block }
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script> Con el codigo de la lista que has puesto.. solo que le puse nav en vez de menu.. lo demas sacalo, me da paja sacar todos los enlacemenu xD
Código HTML:
<ul id="nav">
<li><a href="#" class="enlacemenu" id="primero">Inici</a></li>
<li><a href="#" class="enlacemenu">Plantilla</a></li>
<li><a href="#" class="enlacemenu">Calendari</a>
<ul>
<li><a href="#" class="enlacemenu">Agost '09</a></li>
<li><a href="#" class="enlacemenu">Setembre '09</a></li>
<li><a href="#" class="enlacemenu">Octubre '09</a></li>
<li><a href="#" class="enlacemenu">Novembre '09</a></li>
<li><a href="#" class="enlacemenu">Desembre '09</a></li>
<li><a href="#" class="enlacemenu">Gener '10</a></li>
<li><a href="#" class="enlacemenu">Febrer '10</a></li>
<li><a href="#" class="enlacemenu">Març '10</a></li>
<li><a href="#" class="enlacemenu">Abril '10</a></li>
<li><a href="#" class="enlacemenu">Maig '10</a></li>
<li><a href="#" class="enlacemenu">Juny'10</a></li>
</ul>
</li>
<li><a href="#" class="enlacemenu">Classificació</a>
<ul>
<li><a href="#" class="enlacemenu">LLiga</a></li>
<li><a href="#" class="enlacemenu">Champions League</a></li>
<li><a href="#" class="enlacemenu">Copa del Rei</a></li>
</ul>
</li>
<li><a href="#" class="enlacemenu">Multimèdia</a>
<ul>
<li><a href="#" class="enlacemenu">Fotografies '09/10</a></li>
<li><a href="#" class="enlacemenu">Videos '09/10</a></li>
<li><a href="#" class="enlacemenu">Videos Històrics</a></li>
<li><a href="#" class="enlacemenu">Fons de Pantalla</a></li>
</ul>
</li>
<li><a href="#" class="enlacemenu">Palmarès</a></li>
<li><a href="#" class="enlacemenu">Premsa</a>
<ul>
<li><a href="#" class="enlacemenu">Titulars</a></li>
<li><a href="#" class="enlacemenu">Cròniques</a></li>
</ul>
</li>
<li><a href="#" class="enlacemenu">Contacta</a></li>
</ul>
Bueno y tu en el css lo modificas con los colores y eso.. pero por que pides esto? si en tu pagina ya tienes un desplegable :S