[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]

  Em 15/03/2011 at 18:41, William Bruno disse:

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.

 

  Em 21/03/2011 at 14:25, kivuu disse:

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]

  Em 21/03/2011 at 14:43, kivuu disse:

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

 

  Em 21/03/2011 at 14:25, kivuu disse:

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; }