Intento hacer un menú desplegable doble, pero no me resulta. Tengo un código que funciona en todos los navegadores, pero al agregar el 2º submenu me no funciona del todo bien, en algunos navegadores se muestra abajo y en otros como en firefox se muestra bien. Y me parece que es un problema de código css.
Alguien puede ayudarme por favor, aquí el código:
Código HTML:
<html>
<head>
<style type="text/css">
/* General */
#menu, #menu ul { list-style: none; }
#menu, #menu * { padding: 0; margin: 0; }
/* Head links */
#menu li.submenu1 { width: 220px; float: left; margin-left: -1px; border: 1px black solid; text-align: center; }
#menu li.submenu1 a { display: block; padding: 15px; }
/* Sub Menu 2 */
#menu li.submenu2 ol{display:none; position:relative; list-style: none; }
#menu li.submenu2:hover ol{ display:block; left:220px; margin-top:-20px; }
#menu li.submenu2 ol li {background-color:#00CC00;}
/* Child lists and links */
#menu li.submenu1 ul { display: none; border-top: 1px black solid; text-align: left; }
#menu li.submenu1:hover ul { display: block; }
#menu li.submenu1 ul li a { padding: 5px; height: 17px; }
#menu li.submenu1 ul li a:hover { background-color: #333; }
/* Pretty styling */
body { font-family: verdana, arial, sans-serif; font-size: 0.8em; background-color: red; }
#menu a { color: black; }
#menu ul li a:hover { text-decoration: none; }
#menu li.submenu1 { background-color: white; background-image: url(bg.gif); }
#menu li.submenu1 ul { background-image: url(bg.gif); background-position: bottom; padding-bottom: 10px; }
</style>
<script language="JavaScript">
window.onload = function()
{
var lis = document.getElementById('menu').getElementsByTagName('li');
for(i = 0; i < lis.length; i++)
{
var li = lis[i];
if (li.className == 'submenu1')
{
li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
}
if (li.className == 'submenu2')
{
li.onmouseover = function() { this.getElementsByTagName('ol').item(0).style.display = 'block'; }
li.onmouseout = function() { this.getElementsByTagName('ol').item(0).style.display = 'none'; }
}
}
}
</script>
</head>
<body>
<ul id="menu">
<li class="submenu1">
<a href="http://google.com/">Search Engines</a>
<ul>
<li class="submenu2" >
<a href="http://google.com/">Google</a>
<ol >
<li>cacacacaca</li>
</ol>
</li>
<li><a href="http://yahoo.com/">Yahoo</a></li>
<li><a href="http://live.com/">Live Search</a></li>
</ul>
</li>
<li class="submenu1">
<a href="http://shopping.com">Shopping</a>
<ul>
<li><a href="http://amazon.com/">Amazon</a></li>
<li><a href="http://ebay.com/">eBay</a></li>
<li><a href="http://craigslist.com/">CraigsList</a></li>
</ul>
</li>
</ul>
</body>
</html>