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 <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .menu-departamentos li ul { display: none; } .menu-departamentos li:hover ul { display: block; } <!-- language: lang-html --> <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> <!-- end snippet -->