Problema com sub menu (oculta as não aparece)[RESOLVIDO]

23 de fevereiro de 2017 4 respostas

kmunga 23 de fevereiro de 2017

Boa noite pessoal, estou aprendendo html5 e css3, porem cheguei numa parte do meu curso que não consigo fazer funcionar, já procurei outras fontes e nenhuma funciona. Fiz um menu horizontal que quando o usuário passa o mouse por cima deveria aparecer um sub-menu, porem não acontece de maneira alguma.

Eis o codigo html

Curso de html5

Inicio

O Canil

A raça

Historia

Padrão

Curiosidades

Filhotes

e o codigo CSS

{
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 95%;
}

/*retira os marcadores de listas (bolas) */

ul {

list-style-type: none;

}

/<em>configura menu</em>/

ul li{

background-color: #ccc;

width: 150px;

height: 30px;

float: left;

text-align: center;

line-height: 30px;

cursor: pointer;

}

/<em>evento hover, muda cor de fundo</em>/

ul li:hover {

background-color: #fff;

}

/<em>formata sub menu</em>/

ul li ul li{

text-align: left;

box-sizing: border-box;

padding-left: 5px;

}

/<em>esconde sub menu</em>/

ul li ul {

display: none;

}

/<em>evento hover, mostra submenu</em>/

ul li: hover ul{

display: block;

}

4 Respostas

diego12 23 de fev. de 2017

Tente sem espaço entre o li: e o hover

/*evento hover, mostra submenu*/
ul li:hover ul{

kmunga 23 de fev. de 2017

Tentei e não funcionou, é um mistério, peguei um codigo pronto de outra pessoa e assim mesmo não funcionou.

diego12 23 de fev. de 2017

testei aqui e funcionou

<!DOCTYPE html>
<html>
    <head>
        <style>
            * {
              margin: 0;
              padding: 0;
              font-family: Verdana;
              font-size: 95%;
            }

                /*retira os marcadores de listas (bolas) */
            ul {
              list-style-type: none;
            }

                /*configura menu*/
            ul li {
              background-color: #ccc;
              width: 150px;
              height: 30px;
              float: left;
              text-align: center;
              line-height: 30px;
              cursor: pointer;
            }

                /*evento hover, muda cor de fundo*/
            ul li:hover {
              background-color: #fff;
            }

                /*formata sub menu*/
            ul li ul li {
              text-align: left;
              box-sizing: border-box;
              padding-left: 5px;
            }

                /*esconde sub menu*/
            ul li ul {
              display: none;
            }

                /*evento hover, mostra submenu*/
            ul li:hover ul {
              display: block;
            }
        </style>
    </head>
    <body>
        <p>Curso de html5</p>
        <ul>
            <li>Inicio</li>
            <li>O Canil</li>
            <li>A raça
                <br />
                <ul>
                    <li>Historia</li>
                    <li>Padrão</li>
                    <li>Curiosidades</li>
                </ul>
            </li>
            <li>Filhotes</li>
        </ul>
    </body>
</html>

kmunga 23 de fev. de 2017

Funcionou, eu tava contando que ia abrir um sub-menu de outro menu kkkk , obrigado

Criado 23 de fevereiro de 2017

Ultima resposta 23 de fev. de 2017

Respostas 4

Participantes 2

4 Respostas

Topicos relacionados