Why doesn’t my Submenu show up?

Asked

Viewed 66 times

1

I have this following code, only my submenu does not appear because?

<!DOCTYPE html>
<html lang="pt-br"> 
    <head>
        <title>CSS Template</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>

            /* Menu Principal */
            body
            {
                margin: 0px;
            }

            ul
            {
                list-style-type: none;
                margin: 0px;
                padding: 0px;
                background-color: #333333;
                overflow: hidden;
                font-family: Arial, Helvetica, sans-serif;
            }

            ul li
            {
                float: left;
            }

            ul a
            {
                color: #ffffff;
                text-decoration: none;
                display: inline-block;
                padding: 20px;
            }

            ul li:hover
            {
                background-color: #555555;
            }

            /* SubMenu */

            ul ul
            {
                position: absolute;
                width: 200px;
                background-color: #f9f9f9;
                display: none;
            }

            ul ul li
            {
                width: 100%;
                text-align: center;
            }

            ul ul li a
            {
                color: #000000;
            }

            ul ul li:hover
            {
                background-color: #f1f1f1;
            }

            li.submenu01:hover ul ul
            {
                display: block;
            }

        </style>
    </head>
    <body>
        <ul>
            <li><a href="">Inicio</a></li>
            <li class="submenu01"><a href="">Download</a>
                <ul class="su">
                    <li><a href="">Android</a></li>
                    <li><a href="">IOS</a></li>
                    <li><a href="">Windows 8, 10</a></li>
                    <li><a href="">Linux</a></li>
                    <li><a href="">Mac Os</a></li>
                </ul>
            </li>
            <li><a href="">Informação</a></li>
            <li><a href="">Sobre</a></li>
            <li><a href="">Contato</a></li>
            <li><a href="">Cadastre-se</a></li>
        </ul>
    </body>
</html>

javascript html css

1 answer

2


Here you put one more UL. Just remove it

li.submenu01:hover ul ul
  {
     display: block;
  }

Should just stay li.submenu01:hover ul, Behold

<!DOCTYPE html>
<html lang="pt-br"> 
<head>
   <title>CSS Template</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

      /* Menu Principal */
      body
      {
         margin: 0px;
      }

      ul
      {
         list-style-type: none;
         margin: 0px;
         padding: 0px;
         background-color: #333333;
         overflow: hidden;
         font-family: Arial, Helvetica, sans-serif;
      }

      ul li
      {
         float: left;
      }

      ul a
      {
         color: #ffffff;
         text-decoration: none;
         display: inline-block;
         padding: 20px;
      }

      ul li:hover
      {
         background-color: #555555;
      }

      /* SubMenu */

      ul ul
      {
         position: absolute;
         width: 200px;
         background-color: #f9f9f9;
         display: none;
      }

      ul ul li
      {
         width: 100%;
         text-align: center;
      }

      ul ul li a
      {
         color: #000000;
      }

      ul ul li:hover
      {
         background-color: #f1f1f1;
      }

      li.submenu01:hover ul 
      {
         display: block;
      }

   </style>
</head>
<body>

<ul>
   <li><a href="">Inicio</a></li>
   <li class="submenu01"><a href="">Download</a>
   <ul class="su">
      <li><a href="">Android</a></li>
      <li><a href="">IOS</a></li>
      <li><a href="">Windows 8, 10</a></li>
      <li><a href="">Linux</a></li>
      <li><a href="">Mac Os</a></li>
   </ul>
   </li>
   <li><a href="">Informação</a></li>
   <li><a href="">Sobre</a></li>
   <li><a href="">Contato</a></li>
   <li><a href="">Cadastre-se</a></li>
</ul>

</body>
</html>

  • Whoa, thanks! What’s the logic? i have 2 "ul" i put "ul ul" to refer to the second "ul", if I put 1 "ul" will not refer to the first?

  • @Leandronascimento actually no, because what you have is UL > LI > UL that is you have a UL with a LI inside and inside that LI you have another UL. And in your CSS you put li.submenu01 ul ul.... but within li.submenu01 only has a UL. It was clear or still found confusing? Qq thing speaks there :)

  • I tried to put "ul li ul" but it didn’t work. It wouldn’t be right ?

  • @Leandronascimento was to work yes, if you take this code above in my answer and put for example ul li ul { font-size:30px; Font-family: times; background: red; } you will see that the menu will look like this http://prntscr.com/noclip

  • 1

    It worked well! It helped a lot

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.