efeito de cor css em um menu lista e pop-up

votos
0

No Firefox (isso não funciona em tudo no IE6) Eu tenho esse código

<div class=menu>
    <ul class=nav>
    <li><a href=index.html>Home</a></li>
    <li><a href=software.html>Software</a>
        <ul>
        <li>Blah</li>
        <li>Blah3</li>
        <li>Blah</li>
        </ul>
    </li>
    <li><a href=samples.html>Code Samples</a></li>
    <li><a href=resume.html>Resume</a></li>
    </ul>
    </div>

usando este css

ul.nav li:hover,
.nav   a:hover
{
    background-color:#606060;
    color: white;
}

Eu tenho o texto do menu ( software) tornam-se brancas, enquanto o fundo se torna cinza. No entanto, quando eu movo o mouse para baixo para o item de menu do fundo continua a ser cinza, mas o próximo não é branco! porque? Como posso consertar isso?

Publicado 19/05/2009 em 17:05
fonte usuário
Em outras línguas...                            


3 respostas

votos
1

Isso deve funcionar:

ul.nav li:hover,
ul.nav li:hover a,
{
    background-color:#606060;
    color: white;
}

Eu não sei por que, mas, aparentemente, você tem que selecionar a um elemento directamente ao mudar a sua cor, caso contrário, ele será ignorado.

Respondeu 19/05/2009 em 17:08
fonte usuário

votos
0

Você teria que refazer o seu css, mas se você está fazendo um submenu menu básico que você pode obter tudo isso funciona no IE e FF envolvendo o submenu em sua 'a' tag.

<div class="menu">
    <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="software.html">Software
       <ul>
            <li>Blah</li>
            <li>Blah3</li>
            <li>Blah</li>

       </ul>
      </a>
    </li>
    <li><a href="samples.html">Code Samples</a></li>
    <li><a href="resume.html">Resume</a></li>
    </ul>
</div>

Alguns CSS que não deve exigir JS para trabalhar no IE6. Não testado, mas deve funcionar. Note que você também precisa adicionar estilo e posicionamento para o subnav, mas isso ainda mostra o básico.

.menu ul li a {
  color: blue;
}
.menu ul li a ul {
  display: none;
}
.menu ul li a:hover {
  color: white;
}
.menu ul li a:hover ul {
  display: block;
}
.menu ul li a:hover ul li {

}
.menu ul li a:hover ul li a {
  color: black;
}
.menu ul li a:hover ul li a:hover {
  color: red;
}

Então, para cada submenu que você quer depois do primeiro menu basta adicionar

.menu ul li a:hover ul li a ul {
  display: none;
}
.menu ul li a:hover ul li a:hover ul {
  display: block;
}
Respondeu 19/05/2009 em 17:21
fonte usuário

votos
0

Poderia haver outras regras que interferem com o seu CSS, não posso dizer sem ver tudo. Eu recomendo usar o Firebug para olhar para as regras CSS e CSS calculados para ver se ele está fazendo o que você espera.

Respondeu 19/05/2009 em 17:09
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more