Skip to main content
Removi informações desnecessárias
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Precisei fazer uma correção no HTML, você estava fechando a <li> antes de colocar a <ul> dentro. No seu caso que é uma sub-lista o correto é fazer dessa forma.

<ul>
<li><a></a>
    <ul>
        <li></li>
    </ul>
</li><!-- fecha o LI aqui -->
</ul>

Veja no código abaixo

.menu-departamentos li ul { 
  display: none; 
} 
.menu-departamentos li:hover ul {
  display: block;
}
<section class="menu-departamentos"> 
    <h2>Departamentos</h2>
    <nav> 
      <ul> 
      <li><a href="#">Blusas e Camisas</a> 
        <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>
      <li><a href="#">Calças</a></li> 
      <li><a href="#">Acessórios</a></li> 
      </ul> 
    </nav> 
</section> 

Fonte para você dar uma lida: https://www.w3schools.com/cssref/sel_element_gt.asp

Precisei fazer uma correção no HTML, você estava fechando a <li> antes de colocar a <ul> dentro. No seu caso que é uma sub-lista o correto é fazer dessa forma.

<ul>
<li><a></a>
    <ul>
        <li></li>
    </ul>
</li><!-- fecha o LI aqui -->
</ul>

Veja no código abaixo

.menu-departamentos li ul { 
  display: none; 
} 
.menu-departamentos li:hover ul {
  display: block;
}
<section class="menu-departamentos"> 
    <h2>Departamentos</h2>
    <nav> 
      <ul> 
      <li><a href="#">Blusas e Camisas</a> 
        <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>
      <li><a href="#">Calças</a></li> 
      <li><a href="#">Acessórios</a></li> 
      </ul> 
    </nav> 
</section> 

Fonte para você dar uma lida: https://www.w3schools.com/cssref/sel_element_gt.asp

Precisei fazer uma correção no HTML, você estava fechando a <li> antes de colocar a <ul> dentro. No seu caso que é uma sub-lista o correto é fazer dessa forma.

<ul>
<li><a></a>
    <ul>
        <li></li>
    </ul>
</li><!-- fecha o LI aqui -->
</ul>

Veja no código abaixo

.menu-departamentos li ul { 
  display: none; 
} 
.menu-departamentos li:hover ul {
  display: block;
}
<section class="menu-departamentos"> 
    <h2>Departamentos</h2>
    <nav> 
      <ul> 
      <li><a href="#">Blusas e Camisas</a> 
        <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>
      <li><a href="#">Calças</a></li> 
      <li><a href="#">Acessórios</a></li> 
      </ul> 
    </nav> 
</section> 

Correção no Snippet
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Use o seletor AdjacentePrecisei fazer uma correção no +HTML, você estava fechando a <li> antes de colocar a <ul> dentro. No seu caso que vai dar certoé uma sub-lista o correto é fazer dessa forma.

<ul>
<li><a></a>
    <ul>
        <li></li>
    </ul>
</li><!-- fecha o LI aqui -->
</ul>

Veja no código abaixo

.menu-departamentos li + ul { 
  display: none; 
} 
.menu-departamentos li:hover + ul {
  display: block;
}
<section class="menu-departamentos"> 
    <h2>Departamentos</h2>
    <nav> 
      <ul> 
      <li><a href="#">Blusas e Camisas</a></li>a> 
        <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>
      <li><a href="#">Calças</a></li> 
      <li><a href="#">Acessórios</a></li> 
      </ul> 
    </nav> 
</section> 

Fonte para você dar uma lida: https://developer.mozilla.org/pt-BR/docs/Web/CSS/Adjacent_sibling_selectorshttps://www.w3schools.com/cssref/sel_element_gt.asp

Use o seletor Adjacente + que vai dar certo.

Veja no código abaixo

.menu-departamentos li + ul { 
  display: none; 
} 
.menu-departamentos li:hover + ul {
  display: block;
}
<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> 

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

Precisei fazer uma correção no HTML, você estava fechando a <li> antes de colocar a <ul> dentro. No seu caso que é uma sub-lista o correto é fazer dessa forma.

<ul>
<li><a></a>
    <ul>
        <li></li>
    </ul>
</li><!-- fecha o LI aqui -->
</ul>

Veja no código abaixo

.menu-departamentos li ul { 
  display: none; 
} 
.menu-departamentos li:hover ul {
  display: block;
}
<section class="menu-departamentos"> 
    <h2>Departamentos</h2>
    <nav> 
      <ul> 
      <li><a href="#">Blusas e Camisas</a> 
        <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>
      <li><a href="#">Calças</a></li> 
      <li><a href="#">Acessórios</a></li> 
      </ul> 
    </nav> 
</section> 

Fonte para você dar uma lida: https://www.w3schools.com/cssref/sel_element_gt.asp

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Use o seletor Adjacente + que vai dar certo.

Veja no código abaixo

.menu-departamentos li + ul { 
  display: none; 
} 
.menu-departamentos li:hover + ul {
  display: block;
}
<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> 

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