2

Preciso que a cor do hover permaneça ao abrir o submenu.
Meu submenu funciona, só quero que fique marcado o menu o qual ele está vinculado.
Segue o código de exemplo:

HTML:

<ul>
  <li><a href="#">Link 1  &raquo;</a>
      <ul>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
      </ul>
  </li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

CSS:

ul {
    width: 200px;
    background: #ccc;
    list-style: none;
    padding: 0;
    border: 1px solid #999;
}

ul li {
    border-bottom: 1px solid #999;
    position: relative;
}

ul li:last-child {
    border-bottom: none;
}

ul li a {
    color: #000;
    display: block;
    padding: 5px;
}

ul li a:hover {
    background:#999;
}

ul li ul {
    display:none;
    position: absolute;
    top:0;
    left: 200px;
}

ul li:hover > ul {
    display: block;
}

Pode vê-lo em funcionamento aqui: http://jsfiddle.net/ze8xtpxt/

1 Resposta 1

2

Isto é possível alcançar com uma pequena mudança no teu código CSS.

Primeiro vamos aplicar uma class à lista principal para que seja mais facil trabalhar com ela e para apontarmos com mais precisão aquilo que queremos modificar ou aplicar estilos, para evitar possíveis conflitos no futuro com outras listas.

Esta class vai se chamar .menu por exemplo, que aplicada no código HTML ficará:

<ul class="menu">
    <li><a href="#">Link 1  &raquo;</a>
        <ul>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
    </li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

De seguida iremos então fazer a tal simples modificação no código CSS.
Se reparares no teu código CSS, tens algo como:

ul li a:hover {
    background:#999;
}

Nós iremos substituir este bocado de código com o código abaixo, que irá fazer o mesmo trabalho que ele já estava a fazer, só que ele agora irá também aplicar o estilo pretendido, que é ficar como ativo (ou seja com aquela cor de background cinzento mais escuro) quando estamos a fazer hover sobre o sub-menu.

.menu li:hover > a {
    background:#999;
}

Aqui tens o resultado e exemplo online no jsFiddle.

1
  • 1
    Era isso mesmo! Muito obrigado!
    – buback
    18/09/2015 às 0:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .