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>