Menú CSS + javascript: problemas IE

Anastasiaphp · #1 (**permalink**) 02/03/2007, 04:26

Hola!

Tengo creado un menú css con javacript que funciona bien en la mayoría de los navegadores excepto en IE. Sé dónde está el error, pero no sé como solucionarlo.

Os envío una página que he hecho de prueba, primero está el javascript, después el css y el html:

Javascript

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
// Script para expander y contraer menús
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('desplegable'+i)) {document.getElementById('desplegable'+i).style.display='none';}
}
if (d) {d.style.display='block';}

// script para que funcionen los desplegables en IE
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", "");
}
}
}
}
//

}
//-->
</script>



<style type="text/css">
body {
	font-size: 12px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
}

ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}
#menu, #menu a{
	line-height: 20px;
	list-style: none;
	text-decoration: none;
	font-style: normal;
}

#menu{
	width: 150px;
	padding-left: 15px;
	background-position: 1px 7px;
}

#menu a:hover{
	color: #cccccc;
	background-color: #999999;
}

.menu_desplegable {
	display:none
	line-height: 16px;
	padding: 0px;
	margin: 0px 16px 6px;
}
.menu_desplegable li {
	padding-left: 10px;
	padding-bottom: 3px;
}

.menu_desplegable li ul { /* segundo nivel de lista */
	display: none;
	position: relative;
	top: 0px;
	left: 6px;
}
.menu_desplegable li:hover ul, li.over ul {
	display: block;
}

</style>


</head>


<body>

<div id='menu'><a href='#' onclick=javascript:montre('desplegable1');return false;>Sección 1</a></div>

<div id='desplegable1'>
<ul id='nav' class='menu_desplegable'>
	
	<li>Familia 1
	<ul>
	<li>P1</li>
	<li>P2</li>
	<li>P3</li>
	</ul>
	</li>
	
	<li>Familia 2
	<ul>
	<li>P4</li>
	<li>P5</li>
	</ul>
	</li>
	
	<li>Familia 3
	<ul>
	<li>P6</li>
	<li>P7</li>
	</ul>
	</li>
	
</ul>
</div>


<div id='menu'><a href='#' onclick=javascript:montre('desplegable2');return false;>Sección 2</a></div>

<div id='desplegable2'>
<ul id='nav' class='menu_desplegable'>

	<li>Familia 4
	<ul>
	<li>P8</li>
	<li>P9</li>
	</ul>
	</li>
	
</ul>
</div>
	

</body>
</html>

Creo que el error está en que Explorer sólo permite que llame una vez al id='nav'. Los datos los saco de una BD y me genera un menú desplegable por cada Sección, cada una con un ul id='nav'. En Explorer solo funciona el primer menú desplegable, a partir del segundo, no me despliega la que sería en el ejemplo la Familia 4.

¿Alguien sabe cómo puedo solucionarlo?

He mirado por Internet y por el foro, pero no encuentro un problema como el mío.

Gracias.

rsb17 · #2 (**permalink**) 21/11/2008, 10:54

Tengo el mismo problema. ¿ No lo habras solucionado ya?

JavierB · #3 (**permalink**) 21/11/2008, 11:09

El mensaje original es de hace más de año y medio. Por favor, no reviváis temas tan antiguos.

Saludos,