Menu Drop Daw

[_hoffmann 0]

Galera tenho um menu que quando eu passo o mouse por cima do link abre meu DROP DAW, nesse menu queria colocar :FOCUS no LINK do menu, mais queria fazer igual :HOVER, colocasse o :FOCUS quando passar o mouse por cima do link e desaparecesse quando tiro o mouse do link. Teria como fazer isso

[L. Henrique 179]

Buguei, mas vamos lá: Dropdown é a forma correta de escrita e pronúncia, estou corrigindo isso já que, quando precisar pesquisar, encontre a resposta certa.

A propriedade :focus foi feita para funcionar com elementos de formulários, como input, textarea, radio, button, etc. O :focus, como ele mesmo diz, ativa a propriedade quando o elemento está em foco e ele só fica em foco quando o clique permanece nele e o type do sistema entra em ação.

 

Pra você entender como cada propriedade funciona, veja meu exemplo aqui no JSFiddle.

Não tem como adicionar uma propriedade :focus a um elemento que não seja de formulário, então esqueça essa ideia e se atenha ao hover ou active.

 

INDO DIRETO AO PROBLEMA:

Depois de ler e reler a sua dúvida, eu acabei compreendendo. O que você quer é: Passar o mouse no menu, abrir o sub-menu e o menu ficar com a cor do hover enquanto você navega no sub-menu, certo?

Você pode fazer isso com jQuery, exemplo (mas é melhor não):

$(document).ready(function(){
   var $menu = $("#id_do_seu_menu ul li");

   $nav.hover(function(){
      $(this).children('a').addClass('hover');
   }, function(){
      $(this).children('a').removeClass('hove');
   });
});

Claro que com o jQuery é chato pra caramba, mas também tem como fazer isso com o próprio CSS.

 

Se você estruturar o dropdown dentro de uma <li>, quando você executar o hover no dropdown (que no caso é uma <ul> dentro dessa <li>), ele considera que você ainda está no mesmo elemento e mantém a classe :hover pra ele enquanto você estiver ali.

 

Eu preparei um exemplo pra você e também deixei disponível no JSFiddle, confira e me diga o que achou.

 

Se não puder acessar o Fiddle, vou deixar aqui o código que preparei pra você testar depois.
HTML:

<ul class="menu">
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub-menu 1-1</a></li>
      <li><a href="#">Sub-menu 1-2</a></li>
      <li><a href="#">Sub-menu 1-3</a></li>
      <li><a href="#">Sub-menu 1-4</a></li>
      <li><a href="#">Sub-menu 1-5</a></li>
    </ul>
  </li>
</ul>

CSS:

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* menu */
ul li {
  display: block;
  position: relative;
  float: left;
}
  ul li a {
    padding: 10px;
    text-transform: uppercase;
    background: black;
    color: white;
    margin: 2px;
    white-space: nowrap;
  }
    ul li a:hover {
      background: blue;
    }

/* sub-menu */
ul li ul {
  display: none;
}
  ul li:hover ul {
    display: block;
    margin-top: 20px;
  }
    ul li:hover ul li {
      float: none;
      margin-top: 20px;
    }
      ul li:hover a {
        background: blue;
      }
        ul li:hover ul li a{
          background: black;
        }
          ul li:hover ul li a:hover {
            background: blue;
          }