Menu dropdown

[Henderson]

Olá..

é o seguinte.. to fazendo um menu dropdown aqui.. vertical, com vários níveis

tá tudo funcionando certinho..

o problema é o seguinte..

eu passo o mouse em cima de um item, ele abre um submenu a direita, certo?

se esse submenu qe abriu a direita, ficar sobre algum link, qe já tinha na página.. quando eu passo o mouse sobre ele, ele some.. isso só no internet explorer

é meio complicado de explicar.. vou colocar meu código e uns printscreens pra mostrar

html do menu

.
.
.
<td id="menuLateral">
<ul id="nav">
<li><a href="#">Item 1</a></li> 
<li><a href="#">Item 2</a> 
    <ul> 
    <li><a href="#">Item 2.1</a>
            <ul>
            <li><a href="#">Item 2.1.1 </a>
                <ul>
                <li><a href="#">Item 2.1.1.1</a></li>
                <li><a href="#">Item 2.1.1.2</a></li>
                </ul>
        </li>
            <li><a href="#">Item 2.1.2</a></li>
            </ul>
    </li> 
    <li><a href="#">Item 2.2</a></li> 
    <li><a href="#">Item 2.3</a></li> 
    </ul> 
</li>
<li><a href="#">Item 3</a> 
    <ul> 
    <li><a href="#">Item 3.1</a></li> 
    <li><a href="#">Item 3.2</a></li> 
    </ul> 
</li>
<li><a href="#">Item 4</a> </li> 
</ul>
</td>
.
.
.

css

/* CSS Document */
#menuLateral ul {
margin: 0;
padding: 14px 0 0 0px;
margin-left:12px;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}

#menuLateral ul li {
position: relative;
text-align:left;
}
    
#menuLateral li ul {
position: absolute;
left: 137px;
top: -14px;
}

#menuLateral ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

#menuLateral ul li a:hover {
background:#000;
}
/*************************/    
#menuLateral li ul {
display: none;
}

#menuLateral li:hover ul { 
display: block; 
}

#menuLateral li:hover ul ul {
display:none;
}

#menuLateral li li:hover ul {
display:block;
}

#menuLateral li li:hover ul ul {
display:none;
}

#menuLateral li li li:hover ul {
display:block;
}
/**/

    
/* Fix IE. Hide from IE Mac \*/
* html ul li { 
float: left; 
height: 1%; 
}
* html ul li a { 
height: 1%; 
}
/* End */

javascript

// JavaScript Document
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;

Agora o problema..

O menu tá inserido nessa página

o testo "Cadastre-se" é um link

O menu funciona corretamente, mas, se algum submenu abrir sobre o link, como nessa imagem

quando eu passo o mouse por cima do item 2.1 no internet explorer, todos os submenus escondem..

se a lista de submenus for muito cumprida, e chegar até aqela barra preta qe tem no rodapé da imagem, qe também são links.. o mesmo acontece.. todo o menu some quando eu passo o mouse por aqela região, mesmo qe por cima do submenu

alguém sabe o qe fazer? não sei se consegui ser muito claro!

Editado Dezembro 23, 2008 por Henderson