CSS problem, does not work

Question

Some CSS commands are not working.

Follow the commands:

HTML

 <section class="menu-departamentos"><!-- inicio .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><!-- fim .menu-departamentos -->

CSS

   a[href^=http://]:after {
  content: '(externo)';
}


li ul {
    display: none;
}

You don’t do what you’re supposed to do, I can put color:red; the second nothing happens.

Nothing I put between keys works with the li ul separated by space, only works if I separate them by comma li,ul.

Can anyone tell me why?

I’ve tested with Chrome and Sapphire, both updated.

I use the Sublime Text.

Goal

Remove the submenu of Blouses and Shirts using display:none; in the CSS

Answer 1

Correction

Friend of mine discovered the problem (it was right under my eyes).

Follows the correction:

    <ul>
         <li><a href="#">Blusas e Camisas</a></li> <!-- Esse </li> era o erro. -->
             <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>

<!-- Aqui embaixo do </ul> deveria fechar o </li>, para o  css identificar que é um submenu -->

         <li><a href="#">Calças</a></li>

    </ul>

Correct code:

    <ul>
         <li><a href="#">Blusas e Camisas</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>  
         <li><a href="#">Calças</a></li>

    </ul>

CSS

ul li ul{
    display:none;
}

Motive

The reason the code wasn’t working was because I didn’t close the submenu read as explained above.

Thanks

Thank you to all who tried in some way to help me solve the problem, which in this case was my lack of attention to the code. I totally ignored proofreading the HTML.

Let learning for future readers of this topic, if your CSS does not work, look to revise your HTML, it may be wrong, What can influence when trying to use CSS.

Answer 2

li ul 

The above command is not sequence, so if you do this will not work at all.

It would be right:

ul li

Because in the HTML that’s how it is:

<ul>
   <li> 1 </li>
   <li> 1 </li>
   <li> 1 </li>
</ul>

If comma separation will work, because CSS doesn’t understand sequence but as separate tags.

ul, li = li, ul