Honestamente no sé si esté en el foro correcto. Por que ignoro si el problema de mi codigo esta en jquery, html o css. El administrador lo ubicará en otro rubro, de ser necesario, cosa que no debería pasar.
Este codigo es un menu de 3 niveles.
Mi código funciona muy bien: el segundo nivel despliega y oculta al tercer nivel perfectamente, el único problema es que cuando despliego el tercer y ultimo nivel los datos del segundo nivel se bajan automáticamente al tercero.
Aqui el código javascript
:
Código HTML:
<script>
startList = function() {
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", "");
}
}
}
}
}
window.onload=startList;
</script>
<script>
$( document ).ready(function() {
jQuery(".flotado").bind("click", function () {
jQuery(this).next().slideToggle();
});
});
</script>
Aqui el código CSS:
Código HTML:
#divNav {
background: transparent url(bk-nav.jpg) no-repeat top left;
margin: 0;
padding: 0;
height: 80px;
width: 800px;
}
#nav {
position: relative;
top: 55px;
height: 80px;
width: 800px;
}
#nav li ul, #nav li ul {
margin: 0;
padding: 0;
}
#nav a {
text-decoration: none;
}
#nav li { /*float the main list items*/
margin: 0;
float: left;
display: block;
padding-right: 15px;
}
#nav li ul {
display: none;
}
#nav li.off ul, #nav li.on ul { /*put the subnav below*/
position: absolute;
top: 25px;
left: 0;
padding-top: 15px;
background: black;
height: 28px;
width: 740px;
padding-left: 60px;
}
#nav li.on ul {
background: #f90;
}
#nav li.on:hover ul, #nav li.over ul { /*for ie*/
background: black;
}
#nav li a {
color: black;
display: block;
width: 93px;
padding: 0;
}
#nav li.on a {
color: #f90;
}
#nav li.on ul a, #nav li.off ul a {
border: 0;
float: left; /*ie doesn't inherit the float*/
color: #f90;
width: auto;
margin-right: 15px;
}
#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
background: black;
}
#nav li.on ul {
display: block;
}
#nav li.off:hover ul, #nav li.over ul {
display: block;
z-index: 6000;
}
#nav li.off a:hover, #nav li.on a:hover {
color: #f90;
}
/*do the image replacement*/
#nav li span {
position: absolute;
left: 20px;
}
#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
display: block;
position: relative;
height: 26px;
}
#nav li.off ul a, #nav li.on ul a {
display: block;
background: black;
color: #fff;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#nav li.on ul a {
background: #f90;
}
.dropdowncol {position:absolute; left:-999em; background:#F4F4F4; margin:4px auto; text-align:left;
padding:0px 5px 10px 5px;
border:1px solid #777777;
border-top:none; width: 850px; background-color: black;}
#nav li#liRenaissance ul li:hover .dropdowncol
{
left:-1px;top:30px;
}
div.flotado {float: left; width: 20px; }
.hide{color: white; display: none; border: 1px solid red; }
.hide a {}
Aqui el código HTML:
Código HTML:
<div id="divNav">
<ul id="nav">
<li>Inicio</li>
<li id="liRenaissance" class="off"><a href="#"><span>Catalogo</span></a>
<ul>
<li><a href="#">Mujer</a>
<div class="dropdowncol">
<div class="flotado" >
<a class="primera" href="#" >A</a>
</div>
<div class="hide">
<a href="#">Adidas</a><a href="#">Alyssa Ashley</a><a href="#" > Animale</a><a href="#" > Armani</a>
</div>
<div class="flotado" >
<a href="#" >B</a>
</div>
<div class="hide" >
<a href="#" >Bebe</a>
<a href="#" > Benetton</a>
<a href="#" > Beverly Hills</a>
<a href="#" > Britney Spears</a>
<a href="#" > Burberry</a>
<a href="#" > Bvulgari</a>
</div>
</div>
</li>
<li><a href="#">Hombre</a></li>
<li><a href="#">Unisex</a></li>
<li><a href="#">Bebe</a></li>
</ul></li>
<li>Ventas</li>
<li>Contacto</li>
</ul></div>
Ojalá alguien pueda ayudarme.
Salu2.