1

Tenho esse seguinte código, só que meu submenu não aparece porque?

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

1 Resposta 1

2

Aqui vc colocou um UL a mais. Basta retira-lo

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

Deve ficar apenas li.submenu01:hover ul, Veja

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

5
  • Opa, valeu! mais qual a logica ? eu tenho 2 "ul" eu coloquei "ul ul" para se referir ao segundo "ul", Se eu colocar 1 "ul" não vai se referir ao primeiro? Commented 13/05/2019 às 18:42
  • @LeandroNascimento na verdade nao, pq o que vc tem é UL > LI > UL ou seja vc tem uma UL com uma LI dentro e dentro dessa LI vc tem uma outra UL. E no seu CSS vc colocou li.submenu01 ul ul.... porém dentro de li.submenu01 só tem uma UL. Deu pra ficar claro ou ainda achou confuso? Qq coisa fala ai :)
    – hugocsl
    Commented 13/05/2019 às 18:46
  • Tentei colocar "ul li ul" mais não funcionou. Não estaria certo ? Commented 14/05/2019 às 2:42
  • @LeandroNascimento era para funcionar sim, se vc pegar esse código acima na minha resposta e colocar por exemplo ul li ul { font-size:30px; Font-family: times; background: red; } vc vai ver que o menu vai ficar assim prntscr.com/noclip
    – hugocsl
    Commented 14/05/2019 às 10:36
  • 1
    Funcionou valeu! ajudou bastante Commented 14/05/2019 às 12:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .