Mi codigo funciona pero..

[sandymiau]

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.