Foros del Web » Creando para Internet » CSS »

Submenu Javascript CSS

Estas en el tema de Submenu Javascript CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/12/2008, 09:19
 
Fecha de Ingreso: diciembre-2007
Mensajes: 169
Antigüedad: 10 años
Puntos: 6
Submenu Javascript CSS

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> 
  #2 (permalink)  
Antiguo 31/12/2008, 12:48
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Submenu Javascript CSS

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!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 02/01/2009, 10:31
 
Fecha de Ingreso: diciembre-2007
Mensajes: 169
Antigüedad: 10 años
Puntos: 6
Respuesta: Submenu Javascript CSS

Excelente CaLiZzZ, muchas gracias :D :D :D :D :D
  #4 (permalink)  
Antiguo 02/01/2009, 14:43
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Submenu Javascript CSS

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!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:59.