Menu Drop Down

Kimo Gordinho · 21 de julho de 2017

Oi, bom dia.

Então... eu estou testando meus conhecimentos básicos de HTML5 e CSS3 e como teste eu peguei um site e estou tentando montar ele do zero, mas acho que vou ficar só com o menu mesmo, enfim.

O meu problema é que eu consegui fazer o menu drop down e eu queria que os itens do submenu dos itens do meu menu principal, demorassem para desaparecer quando eu tirasse o cursor do mouse de cima do item do menu principal. Exemplo:
O meu item "Editar Perfil" tem os seus seguintes subitens: "Resumo", "Configurações da Conta", "Look and Layout" e "Perfil no Fórum".

Eu quero que ao retirar o cursor do mouse de cima do item "Editar Perfil" do meu menu principal, em contrapartida os itens do meu submenu permaneçam aparecendo dentro de um limite de tempo, como por exemplo, três segundos.

DiF · 21 de julho de 2017

@Kimo Gordinho Olá, seria interessante você postar o código que fez.

Você pode fazer isso, tanto com CSS3 quanto com jQuery.

Kimo Gordinho · 21 de julho de 2017

@DiF Tá, tudo bem e obrigado por responder e eu não tenho conhecimento em jQuery . Aqui está o código em HTML5:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>CROSSFIRE Ideal</title>
    <link rel="stylesheet" type="text/css" href="_css/início.css">
</head>
<body>
    <nav id="menu">
        <ul type="none">
            <li class="menu-principal"><a href="">NOTÍCIAS</a>
                <ul>
                    <li><a href="_html/notícias.html">NOTÍCIAS</a></li>
                    <li><a href="_html/atualizações.html">ATUALIZAÇÕES</a></li>
                    <li><a href="_html/eventos.html">EVENTOS</a></li>
                    <li><a href="_html/feeds.html">FEEDS</a></li>
                </ul>
            </li>
            <li class="menu-principal"><a href="">JOGO</a>
                <ul>
                    <li><a href="_html/visão-geral.html">VISÃO GERAL</a></li>
                    <li><a href="_html/começando-o-jogo.html">COMEÇANDO O JOGO</a></li>
                    <li><a href="_html/modos.html">MODOS</a></li>
                    <li><a href="_html/soldados.html">SOLDADOS</a></li>
                    <li><a href="_html/arsenal.html">ARSENAL</a></li>
                    <li><a href="_html/patentes.html">PATENTES</a></li>
                    <li><a href="_html/download.html">DOWNLOAD</a></li>
                </ul>
            </li>
            <li class="menu-principal"><a href="_html/mídia.html">MÍDIA</a></li>
            <li class="menu-principal"><a href="início.html">CROSSFIRE Ideal</a></li>
            <li class="menu-principal"><a href="">RANKING</a>
                <ul>
                    <li><a href="_html/soldados.html">SOLDADOS</a></li>
                    <li><a href="_html/clãs.html">CLÃS</a></li>
                </ul>
            </li>
            <li class="menu-principal"><a href="">FÓRUM</a>
                <ul>
                    <li><a href="_html/fórum.html">FÓRUM</a></li>
                    <li><a href="_html/lista-negra.html">LISTA NEGRA</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

E aqui está o código em CSS3:

@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Agency FB", "Aharoni", "Algerian", "Andalus", "Angsana New", "AngsanaUPC", "Aparajita", "Arabic Typesetting", "Arial", "Arial Black", "Arial Narrow", "Arial Rounded MT Bold",sans-serif;
    font-size: 20px;
}

nav#menu {
    list-style: none;
    border: 2px solid cadetblue;
    position: absolute;
    left: 23%;
    top: 5%;
    width: 750px;
}

nav#menu li {
    position: relative;
    float: left;
    border-right: 50px solid white;
}

nav#menu li a {
    color: #333;
    padding: 5px 10px;
    display: block;
    text-decoration: none;
    -webkit-animation-delay: -3s;
}

nav#menu li a:hover {
    background: #333;
    color: #fff;
    text-shadow: 0 0 5px #fff;
    transition: 1s;
}

nav#menu li ul {
    position: absolute;
    top: 110%;
    left: 0;
    background-color: #fff;
    display: none;
}

nav#menu li:hover ul, #menu li.over ul {
    display: block;
}

nav#menu li ul li {
    border: 0;
    display: block;
    width: 150px;
}

NOTA: O atributo/estilo "-webkit-animation-delay" eu já usei no "link a:hover" e não funcionou.

_______________________________
#ACRESCENTANDO

Ah... esqueci de dizer que eu também estou tentando já faz alguns dias, é de que quando eu passar o cursor do mouse por cima dos itens do menu principal, esses itens ficam sublinhados, como no site oficial do CFAL, só que eu não estou conseguindo já tentei de uma forma e acaba sublinhando até os itens do submenu, aí depois, eu tentei declarando classes para os menus principais e nada de eu conseguir, foi o mesmo resultado de antes... sublinha todos os itens, menus e submenus.

Por isso que eu mantive as classes ali. Eu estava tentando resolver isso também.

Poderia me ajudar com isso também ?

DiF · 21 de julho de 2017

@Kimo Gordinho Não tenho certeza, mas você pode usar dois valores em segundos no transition.

Por exemplo veja este código: http://jsfiddle.net/joplomacedo/VP7hE/

Repare que o transition, possui dois valores. Onde o primeiro é a velocidade de mostrar e o segundo é a velocidade de esconder.

Eu acho, que no seu código CSS pode estar havendo algum conflito. Não descobri onde. Mas pode ser isso, que está impedindo de funcionar.

Kimo Gordinho · 22 de julho de 2017

@DiF Aaaaaaaaaaaaaaaaahhh entendi.
Vou tentar aqui e já volto aqui para trazer o resultado. Acho que dessa vez vai funcionar.

muito obrigado por tudo ^^

__________________________________________________________________________
Muito obrigado, cara! Pelo que parece é algum erro no meu CSS mesmo. Só que na IDE que eu uso, está dizendo que todas as linhas estão corretas, até mesmo meu arquivo HTML.

Só pode ser azar mesmo, minha vida é assim :/ enfim.... vou deixar pra lá HTML e CSS e voltar com linguagem de programação :/