Código FUnciona em todos os navegadores menos no IE7

Front-end
#1

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="#">&raquo;&raquo; Musico</a> 
                <ul> 
                    <li><a href="#">Pesquisar</a></li> 
                    <li><a href="#">Gerenciar</a></li> 
                </ul> 
            </li>
            
            <li><a href="#">&raquo;&raquo; Empresa</a> 
                <ul> 
                    <li><a href="#">Pesquisar</a></li> 
                    <li><a href="#">Gerenciar</a></li> 
                </ul> 
            </li>

            <li><a href="#">&raquo;&raquo; Conselho</a> 
                <ul> 
                    <li><a href="#">Pesquisar</a></li> 
                    <li><a href="#">Gerenciar</a></li> 
                </ul> 
            </li> 
            
            <li><a href="#">&raquo;&raquo; Entrada/Saida</a></li>
            
            <li><a href="#">&raquo;&raquo; 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="#">&raquo;&raquo; 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;
#2