1

Estou tentando fazer um menu que abre ao passar o mouse abre o submenu correspondente. No caso, o menu "blusas e camisas" deveria estar com o seu submenu fechado, abrindo apenas ao passar o mouse sobre ele para mostrar as opções manga curta e as demais. porém, quando abro a tela no meu navegador, o submenu já aparece logo abaixo como se estivesse ali estático, o que me faz supor que o CSS esteja falhando nesta função

No css tenho

.menu-departamentos li ul { 
    display: none; 
} 
.menu-departamentos li:hover ul {
    display: block;
}

e no HTMl eu tenho

<section class="menu-departamentos"> 
<h2>Departamentos</h2>
<nav> 
<ul> 
<li><a href="#">Blusas e Camisas</a></li> 
<ul> 
    <li><a href="#">Manga curta</a></li> 
    <li><a href="#">Manga comprida</a></li> 
    <li><a href="#">Camisa social</a></li> 
    <li><a href="#">Camisa casual</a></li> 
</ul> 
<li><a href="#">Calças</a></li> 
<li><a href="#">Acessórios</a></li> 
</ul> 
</nav> 
</section> 
2
  • Rafael seu problema na verdade era no HTML e não no CSS, Executa o Snippet da minha resposta que agora ele funciona direitinho com Hover nos subintes etc.
    – hugocsl
    4/01/2018 às 15:06
  • Obrigado, funcionou já 4/01/2018 às 15:17

1 Resposta 1

1

Precisei fazer uma correção no HTML, você estava fechando a <li> antes de colocar a <ul> dentro. No seu caso que é uma sub-lista o correto é fazer dessa forma.

<ul>
<li><a></a>
    <ul>
        <li></li>
    </ul>
</li><!-- fecha o LI aqui -->
</ul>

Veja no código abaixo

.menu-departamentos li ul { 
  display: none; 
} 
.menu-departamentos li:hover ul {
  display: block;
}
<section class="menu-departamentos"> 
    <h2>Departamentos</h2>
    <nav> 
      <ul> 
      <li><a href="#">Blusas e Camisas</a> 
        <ul> 
            <li><a href="#">Manga curta</a></li> 
            <li><a href="#">Manga comprida</a></li> 
            <li><a href="#">Camisa social</a></li> 
            <li><a href="#">Camisa casual</a></li> 
        </ul> 
      </li>
      <li><a href="#">Calças</a></li> 
      <li><a href="#">Acessórios</a></li> 
      </ul> 
    </nav> 
</section> 

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 .