Submenu Javascript CSS

albertcito · #1 (**permalink**) 31/12/2008, 09:19

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>

Calizman · #2 (**permalink**) 31/12/2008, 12:48

Saludos albertcito!!

Creo que si visitas esta pagina http://www.araudi.net podras obtener respuestas!!

Espero que te ayude! y sino te sirve... sigue posteando! xD

Saludos! y Felices Fiestas!!

albertcito · #3 (**permalink**) 02/01/2009, 10:31

Excelente CaLiZzZ, muchas gracias :D :D :D :D :D

Calizman · #4 (**permalink**) 02/01/2009, 14:43

Ok! es bueno ayudarte! si tienes mas preguntas, no dudes en postear! aqui trataremos de ayudarte! y en cuanto termines la pagina me pasas el link para ver como quedo no?

Suerte y Saludos!