Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Sub menu

Fala galera! Alguém pode me ajudar? Gostaria de exibir o próxima menu quando o mouse estiver na opção "6" porém não estou conseguindo. OBS: A opção "6" está no sub menu está no "1" do menu de navegação.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Teste Header</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">


        <style>

            body{
                font-family: "Open Sans Condensed";
                text-align: justify;
            }

            .header{
                background-color: cornflowerblue;
            }            
            .tituloprincipal{
                background-color:cornflowerblue;
                font-weight:bold;
                font-size: 3rem;
                padding: .8em;
            }            
            ul{
                text-align: center;

            }            
            li{
                padding: 1em 7em;
            }            
            .submenuum, .submenuseis{
                display: none;
            }            
            .menuprincipal>li{
                display: inline-block;
                background-color: aqua;
                position: relative;
            }


            .submenuum {
                position: absolute;
                top:3em;
                left: 0;                
                border-top: solid .3em #000;
            }
            .submenuum>li {
                border-bottom: solid .1em aqua;
                background-color: cornflowerblue;
            } 
            .submenuseis>li{
                border-bottom: solid .1em cornflowerblue;
                background-color: aqua;
            }
            .submenuum>li:hover {
                background-color: aqua;
            }
            .submenuseis>li:hover{
                background-color: cornflowerblue;
            }
            #um:hover .submenuum {
                display: block;
            }
            .submenuum #linhaseis:hover .submenuseis{
                display: block;
            }     

        </style>

    </head>

    <body>
        <header>
            <div class="header">
            <h1 class="tituloprincipal">Carlos E.Reis</h1>
            <ul class="menuprincipal">
                <li id=um>1
                    <ul class="submenuum">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li id="linhaseis">6</li>
                            <ul class="submenuseis">
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>                        
                            </ul>
                        <li>7</li>                        
                    </ul>
                </li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
            </div>
        </header>
    </body>
</html>
2 respostas
solução!

Boa noite, Carlos.

Camarada, você fechou o li antes de abrir a UL.submenuseis então o CSS simplesmente não encontra esse elemento dentro da árvore e, consequentemente, não tem o comportamento esperado.

Repare que no li #um você fez o certo, por isso funcionou perfeitamente.

Espero ter ajudado.

Valeu Rafael obrigado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software