Válido para XHTML 1.0 Estrícto + CSS
El código:
<style type="text/css">
/* menú */
#menu h2{display:none}
#menu ul{list-style:none;margin:0;padding:0;overflow:hidden;}
#menu li{float:left;}
#menu a{font: 1em 'times new roman', serif;text-align:center;text-decoration:none;width:120px;display:block;outline:none;}
#menu a:link, #menu a:visited{color:#fff;background:#00f;border:#009 solid 1px;}
#menu a:hover{color:#000;background:#0f0;border:#090 solid 1px;}
#menu a:focus, #menu a:active{color:#000;background:#f00;border:#900 solid 1px;}
/* submenú desplegable */
#menu ul li ul{display:none;position:absolute;}
#menu ul li:hover ul{display:block;}
#menu li ul li{clear:left;}
#menu li ul a:link, #menu li ul a:visited{color:#fff;background:#99f;border:#00f solid 1px;}
#menu li ul a:hover{color:#000;background:#9f9;border:#0f0 solid 1px;}
#menu li ul a:focus, #menu li ul a:active{color:#000;background:#f99;border:#f00 solid 1px;}
</style>
Importante
No olvides usar un DocType, de lo contrario puede no funcionar en Internet Explorer 7+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
El menú desplegable básico no funciona con Internet Explorer 6 o menor.
Como implementar:
<div id="menu"> <h2>Menú</h2> <ul> <li><a href="#">Uno</a> <ul> <li><a href="#">1.Uno</a></li> <li><a href="#">1.Dos</a></li> <li><a href="#">1.Tres</a></li> </ul> </li> <li><a href="#">Dos</a> <ul> <li><a href="#">2.Uno</a></li> <li><a href="#">2.Dos</a></li> </ul> </li> <li><a href="#">Tres</a> <ul> <li><a href="#">3.Uno</a></li> <li><a href="#">3.Dos</a></li> <li><a href="#">3.Tres</a></li> <li><a href="#">3.Cuatro</a></li> <li><a href="#">3.Cinco</a></li> </ul> </li> <li><a href="#">Cuatro</a> <ul> <li><a href="#">4.Uno</a></li> <li><a href="#">4.Dos</a></li> <li><a href="#">4.Tres</a></li> </ul> </li> <li><a href="#">Cinco</a> <ul> <li><a href="#">5.Uno</a></li> <li><a href="#">5.Dos</a></li> <li><a href="#">5.Tres</a></li> <li><a href="#">5.Cuatro</a></li> </ul> </li> </ul> </div>
Sustituye el "#" por la página que te dirigirá. Si los menús principales no llevan a ninguna página, deja el "#".
