Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- ul { padding:0; margin:0; list-style:none; } li{ float:left; position:relative; width:10em; } li ul{ display:none; position:absolute; top:1em; left:0; clear:left; } li > ul{ top:auto; left:auto; } li:hover ul, li.hover ul{ display:block; } --> </style> <script language="JavaScript" type="text/javascript"> 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> </head> <body> <ul id="nav"> <li>Menu <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ul> </li> <li>Menu2 <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> </li> </ul> </body> </html>
es puro y limpio codigo css y html, maladornado con una funcion de javaScript, bueno veamos que resulta.