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>