[Resolvido] Segundo nivel de menu não aparece

Possuo o seguinte menu escrito em CSS:

/ DROP DOWN MENU /
/ First level /
div.menu { margin: 0px; padding: 10px; width: 1000px; height: 5%; border: 1px solid #808080; }
div.menu ul { margin: 0px; padding: 0px; list-style-type: none; position: absolute; }
div.menu li { float: left; position: relative; }
div.menu a { display: block; width: 100px; filter: alpha(opacity=50); opacity: 0.5; }
div.menu a:link,
div.menu a:visited {

font-family: arial;
font-size: 10pt;
color: #000000;
background-color: #98BF21;
text-align: center;
padding: 3px;
text-decoration: none;
text-transform: capitalize;
}

div.menu a:hover,
div.menu a:active {

color: #FFFFFF;
background-color: #7A991A;
padding: 3px;
}

/ Second level /
div.menu li ul { margin: 0px; padding: 0px; list-style-type: none; position: absolute; display: none; }
div.menu li ul li { float: left; position: relative; }
div.menu li ul li a { width: 100px; font-weight: bold; filter: alpha(opacity=90); opacity: 0.9; }
div.menu li ul li a:link,
div.menu li ul li a:visited {

color: #000000;
background-color: #D3D3D3;
}

div.menu li ul li a:hover,
div.menu li ul li a:active {

color: #FFFFFF;
background-color: #808080;
}

div.menu ul li:hover ul, ul li.over ul { display: block; }

No firefox executa normalmente sem nenhum problema. Tenho testado no IE7 e não tenho conseguido resultados. Pensei ser algo com a função :hover e .over porém para o primeiro nível a cor e outrso efeitos é mudada no IE com o mouse. Porém não com o mouse over em algum item a segunda lista não aparece.

Exemplo de menu:

<div class="menu">
<ul>
<li><a href="pag1.php">pag1</a></li>
<li><a href="pag2.php">pag2</a>
 <ul>
 <li><a href="subpag1.php">subpag1</a></li>
 <li><a href="subpag2.php">subpag2</a></li>
 </ul>
 </li>
</ul>
</div>

Alguém ai tem alguma idéia do que seja?

PS.: Qual a melhor maneira de se fazer um menu para um site? Uso de CSS apenas, CSS com JS ou Flash?