Hover, Display none, Seletor

Front-end CSS
,
#1

Olá pessoal.

Estou tentando configurar um submenu.
Este submenu deve ficar oculto e após posicionar o mouse sobre um dos tópicos ele deveria abrir as opções.

Estou achando que o problema possa estar na forma como estou usando o seletor.

Abaixo segue a parte do código que considero relevante mas no final coloquei o link para o código completo.
O que eu gostaria de deixar oculta é a

    dentro do
  • blusas e camisetas

    • HTML

<section class="menu-departamentos">
			<h2>DEPARTAMENTOS</h2>
			<nav>
				<ul>
					<li><a href="#">BLUSAS E CAMISETAS</a></li>
						<ul >
							<li><a href="#">Manga Curta</a></li>
							<li><a href="#">Manga Cumprida</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="#">SAIAS</a></li>
					<li><a href="#">VESTIDOS</a></li>
					<li><a href="#">SAPATOS</a></li>
					<li><a href="#">BOLSAS E CARTEIRAS</a></li>
					<li><a href="#">ACESSÓRIOS</a></li>
				</ul>
			</nav>
		</section>

CSS
.menu-departamentos li ul{
display: none;
}
.menu-departamentos li:hover ul{
display: block;
}
.menu-departamentos ul ul li{
background-color: #dcdcdc;

Aqui tem o link com o código completo:

Valeu galera…

#2

Achei o bug. Eu fechei a tag <li> antes mesmo do <ul> do submenu.
O certo ficou assim:

<li>
<a href="#">BLUSAS E CAMISETAS</a>
	<ul >
		<li><a href="#">Manga Curta</a></li>
		<li><a href="#">Manga Cumprida</a></li>			
		<li><a href="#">Camisa Social</a></li>
		<li><a href="#">Camisa Casual</a></li>	
	</ul> 
</li>