Use o seletor Adjacente <kbd>**+**</kbd> que vai dar certo.

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></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> 

<!-- end snippet -->

*Fonte para você dar uma lida:* https://developer.mozilla.org/pt-BR/docs/Web/CSS/Adjacent_sibling_selectors