CSS problem

Well, I have a problem, I know this is functional, but it never worked for me.

Follow the code:

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 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;
}

My question should be quite simple.

My problem is actually ... I can make changes in css using li,ul NORMAL, BUT, using li,ul , which is what I need, it NEVER changes.

Browser used: Google Chrome