HTML-CSS hide and show submenu does not work

I'm trying to make a menu that opens when hovering the mouse opens the corresponding submenu. In this case, the menu "blouses and shirts" should be with its submenu closed, opening only by hovering over it to show the options short sleeve and the others. however, when I open the screen in my browser, the submenu already appears just 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>
Author: rLinhares, 2018-01-04
Source

1 answers

I needed to make a fix on HTML, you were closing the <li> before putting the <ul> inside. In your case that is a sub-list the correct is to do this way. 

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

See 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>
 1
Author: hugocsl, 2018-01-04 15:06:31