HTML-CSS hide and show submenu does not work

Question

HTML-CSS hide and show submenu does not work

Navigation

#1 by (1 votes)

1

I'm trying to make a menu that opens when mouseover opens the corresponding submenu. In this case, the menu "blouses and shirts" should be with its submenu closed, opening just by hovering over it to show the short sleeve options and the others. but when I open the screen in my browser, the submenu already appears below as if it were there static, which makes me assume that CSS is failing in this function

In css I have

.menu-departamentos li ul { 
    display: none; 
} 
.menu-departamentos li:hover ul {
    display: block;
}

and in HTMl I have

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

html css css-hover hover

asked by anonymous 04.01.2018 / 15:08

1 answer

How to use touch event on iPad with ui-draggable and ui-resizable? Include menu for other pages

score 1 · Answer 1

I needed to make a fix on HTML , you were closing <li> before putting <ul> in. In your case that is a sub-list the correct one is to do this.

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

See the code below

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