por desgracia aún no tengo colgado nada, dejo el código por partes a ver si se entiende algo mejor. Gracias por vuestra atención!
el XHTML:
Código :
<ul id="primerNivel">
<li>
<a href="#" title="Recursos">Recursos</a>
<ul id="segundoNivel">
<li><a href="" title="">Gestión</a></li>
<li>
<a href="" title="">Asistencia</a>
<ul class="tercer">
<li><a href="" title="">Opción tercer nivel</a></li>
<li><a href="" title="">Tercer nivel</a></li>
</ul>
</li>
<li><a href="" title="">Vacaciones</a></li>
<li><a href="" title="">Permisos</a></li>
</ul>
</li>
<li><a href="#" title="Certificaciones">Certificaciones</a></li>
<li><a href="#" title="Expedientes">Expedientes</a></li>
<li><a href="#" title="Iniciativas">Iniciativas</a></li>
<li><a href="#" title="Proyectos">Proyectos</a></li>
<li><a href="#" title="Administración">Administración</a></li>
</ul>
y el css:
Código :
ul#primerNivel {
width:100%;
min-width:770px;
height:2.25em;
background:#EEF1F2 url('../img/menu.png') repeat-x bottom;
font-size:70%;
margin:0 auto;
text-align:left;
position:relative;
z-index:5000;
}
ul#primerNivel li {
display:inline;
padding:.4em 3em;
position:relative;
top:.5em;
left:1.5em;
background:transparent url('../img/bordeLisMenu.png') no-repeat right 50%;
}
ul#primerNivel li a {
color:#536076;
}
/************* preparamos cómo se verá cuando esté desplegado */
ul#primerNivel li ul {
display:none;
position:absolute;
top:2em;
left:0;
width:100%;
*width:10.5em;
padding-bottom:3px;
background:#E7E3E7 url('../img/lineasHorizontales.gif') repeat-x bottom;
}
ul#primerNivel li ul li { top:0; left:0; }
ul#primerNivel li.over,
ul#primerNivel li:hover {
background:#F2F3F2 url('../img/hoverMenu.png') repeat-x;
color:#000;
}
ul#primerNivel li.over ul li,
ul#primerNivel li:hover ul li,
ul#primerNivel li.over ul li ul li,
ul#primerNivel li:hover ul li ul li {
background:#fff;
font-weight:500;
}
ul#primerNivel li ul li a:hover,
ul#primerNivel li ul li ul li a:hover{
background:#F4F1EF;
}
ul#primerNivel a:hover {
color:#353E4C;
}
ul#primerNivel li.over ul,
ul#primerNivel li:hover ul {
display:block;
}
/************** preparamos también como se verán los li cuando esté desplegado */
ul#primerNivel li ul li {
display:block;
padding:0;
text-align:center;
border:1px solid #E7E3E7;
border-top:0;
background:#fff;
position:relative;
}
ul#primerNivel li ul li a {
display:block;
padding:.2em 0;
}
ul#primerNivel li ul li ul.tercer {
display:none;
position:absolute;
top:0;
left:10.35em;
*left:7.5em;
background:red;
padding:0;
background:#fff;
padding-bottom:3px;
background:#E7E3E7 url('../img/lineasHorizontales.gif') repeat-x bottom;
}
ul#primerNivel li ul li.over ul.tercer,
ul#primerNivel li ul li:hover ul.tercer {
display:block;
}
ul#primerNivel li ul li ul li {
background:#fff;
position:relative;
top:0;
}
y por último, el js,
donde debe estar el problema:
Código :
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("primerNivel");
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", "");
}
}
}
navRoot2 = document.getElementById("segundoNivel");
for (i=0; i<navRoot2.childNodes.length; i++) {
node2 = navRoot2.childNodes[i];
if (node2.nodeName == "LI") {
node2.onmouseover=function() {
this.className+=" over";
}
node2.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
[/code]