[Resolvido] Segundo nivel de menu não aparece

[kivuu 0]

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?

[William Bruno 1501]

css com js

 

aqui tem alguns exemplos funcionais:

http://forum.imasters.com.br/topic/354140-repente-css-menus/

 

você está usando a 'função do Maujor' para atribuir a class .over ?

[kivuu 0]

css com js

 

aqui tem alguns exemplos funcionais:

http://forum.imasters.com.br/topic/354140-repente-css-menus/

 

você está usando a 'função do Maujor' para atribuir a class .over ?

 

Não sei o que seria esta função. Estou utiliznado apenas CSS, nada de JS.

[William Bruno 1501]

a class .over só tem sentido com esse js aqui:

<script type="text/javascript">
window.onload = function() {
if (document.all&&document.getElementById) {
       navRoot = document.getElementById("menu");
               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", "");
  }
  }
 }
}
}
</script>

[kivuu 0]

Sabia dessa não. Vacilo meu. Vou fazer uns testes para verificar se funciona.

 

Sabia dessa não. Vacilo meu. Vou fazer uns testes para verificar se funciona.

 

Retomando... Valeu pela dica da função, deu certo. Os links agora aparecem. Porém na primeira vez que o mouse passa por cima o segundo nível aparece listado na vertical como desejado, mas ao passar o mouse sobre o segundo nível ele se dispõe na horizontal. Ainda é algo do navegador ou é erro meu no CSS?

[kivuu 0]

Sabia dessa não. Vacilo meu. Vou fazer uns testes para verificar se funciona.

 

Sabia dessa não. Vacilo meu. Vou fazer uns testes para verificar se funciona.

 

Retomando... Valeu pela dica da função, deu certo. Os links agora aparecem. Porém na primeira vez que o mouse passa por cima o segundo nível aparece listado na vertical como desejado, mas ao passar o mouse sobre o segundo nível ele se dispõe na horizontal. Ainda é algo do navegador ou é erro meu no CSS?

 

Consegui me responder. Era uma erro meu no CSS. Na linha:

div.menu li			{ float: left; position: relative; }

Ele estava alterando também a linha:

div.menu li ul li                 { float: left; position: relative; }

Apesar de esta última também estar errada pelo float: left

 

A correção para as linhas, respectivamente é:

 

div.menu ul li { float: left; position: relative; }

...

div.menu li ul li { float: none; position: relative; }