ola galera estou com um pequeno problema de incompatibilidade de navegadores, estou fazendo o menu drop down que ví no site http://www.maujor.com/tutorial/ddownmenu.php lá ele funciona tranquilo em qualquer navegador porém quando migrei para minha aplicação ele dá problema no IE (testei no firefox e no chome e funcionou certinho), o que acontece é o seguinte quando eu coloco o cursor em cima da opção desejada ele abra a caixa de expansão(o drop dow) só que quando eu vou para clicar no conteúdo que expandiu a caixa some, é como se o meu cursor perdesse o foco do link que estava em cima
HTML:
<html>
<head>
<title>--- ---</title>
<link rel="stylesheet" href="../suporte/estilo.css" type="text/css">
<script type="text/javascript" src="../suporte/funcao.js"></script>
</head>
<body>
<div id="dvBanner">
<table border="0" style="width:10%">
<tr>
<td><img src="../imagens/brasao.jpg" style="width:150px;height:140px"></td>
</tr>
<tr style="text-align:center; border-bottom:1px solid #000066;">
<td class="azul_20">teste</td>
</tr>
<tr style="text-align:center">
<td>teste</td>
</tr>
</table>
</div>
<div id="dvMenu">
<ul id="nav">
<li>
<a href="#">»» Musico</a>
<ul>
<li><a href="#">Pesquisar</a></li>
<li><a href="#">Gerenciar</a></li>
</ul>
</li>
<li><a href="#">»» Empresa</a>
<ul>
<li><a href="#">Pesquisar</a></li>
<li><a href="#">Gerenciar</a></li>
</ul>
</li>
<li><a href="#">»» Conselho</a>
<ul>
<li><a href="#">Pesquisar</a></li>
<li><a href="#">Gerenciar</a></li>
</ul>
</li>
<li><a href="#">»» Entrada/Saida</a></li>
<li><a href="#">»» Relatórios</a>
<ul>
<li><a href="#">Musico</a></li>
<li><a href="#">Empresa</a></li>
<li><a href="#">Entrada/Saida</a></li>
</ul>
</li>
<li><a href="#">»» Administrativo</a>
<ul>
<li><a href="#">Cadastro</a></li>
<li><a href="#">Gerenciamento</a></li>
</ul>
</li>
</ul>
</div>
<div id="dvCentro">
<iframe name="centro" frameborder="0" width="100%" height="100%" src="http://www.google.com.br"></iframe>
</div>
</body>
</html>
CSS:
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a {font-family: Verdana;font-size: 12px;color: #000066;}
input {font-family: Verdana;font-size: 12px;color: #000066;border: 1px solid #003366; background-color:#FFFFFF}
table {font-family: Verdana;font-size: 16px;color: #000033; width:100%; border-collapse: collapse;}
#azul_20 {font-family: Verdana; font-size: 25px;color: #000033;}
.azul_20 {font-family: Verdana; font-size: 20px;color: #000033;}
.azul_12 {font-family: Verdana; font-size: 12px;color: #000033;}
.vermelho_12{font-family: Verdana; font-size: 12px;color: #FF0000;}
.vermelho_14{font-family: Verdana; font-size: 14px; font-weight:bold; color: #FF0000; }
.verde_12{font-family: Verdana; font-size: 12px;color: #009900;}
#dvBanner{
position: absolute;
top:0%;
left:0%;
}
#dvMenu{
position: absolute;
top:40%;
left:0%;
z-index:1;
}
#dvCentro{
border: 1px solid #000066;
position: absolute;
top:4%;
left:15%;
width:84%;
height:92%;
z-index:0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
li:hover ul, li.over ul {
display: block;
}
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;