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.