Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
}color: #FFFFFF;
background-color: #7A991A;
padding: 3px;
}color: #000000;
background-color: #D3D3D3;
}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?
>
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.
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>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?
>
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; }
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 ?