CSS problem, does not work

Question

CSS problem, does not work

Navigation

#1 by (1 votes)
#2 by (-1 votes)

0

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

Do not do what it was to do, I can put color:red; in the second that nothing happens.

Nothing that I put in braces works with li ul separated by space, only works if I separate them by comma li,ul .

Can anyone tell me why?

I have tested with both Chrome and Sapphire, both updated.

I use Sublime Text.

Goal

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

html css

asked by anonymous 11.02.2017 / 19:56

2 answers

vagrant unable to find virtualbox guest additions and kernel module Mongodb not installed

score 1 · Answer 1

Correction

My friend discovered the problem (it was right under my eyes).

The fix:

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

Reason

The reason the code was not working was because I did not close the submenu li as explained above.

Thanks

Thanks to everyone who tried to somehow help me to solve the problem, which in the case was my lack of attention to the code. I totally ignored reviewing HTML.

score -1 · Answer 2

li ul

The above command is not a sequence, so if it does, it will not work at all.

It would look like this:

ul li

Because HTML looks like this:

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

If you separate by comma will work, why CSS does not understand as a sequence but rather as separate tags.

ul, li = li, ul