HTML-CSS hide and show submenu does not work

Asked

Viewed 1,600 times

1

I’m trying to make a menu that opens when passing the mouse opens the corresponding submenu. In this case, the "blouses and shirts" menu should be with its submenu closed, opening only by hovering over it to show the short sleeve options and the others. however, when I open the screen in my browser, the submenu already appears right below as if it were there static, which makes me assume that the CSS is failing in this function

In css I have

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

and in Html I have

<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>
html css hover css-hover

  • Rafael his problem was actually in HTML and not in CSS, Snippet runs my answer that now it works right with Hover on the subintes etc.

  • Thanks, it worked already

1 answer

1

I needed to make a correction on HTML, you were closing the <li> before putting the <ul> inside. In your case it is a sub-list it’s right to do it this way. 

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

See in the code below 

.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>

Browser other questions tagged html css hover css-hover

You are not signed in. Login or sign up in order to post.