Ajuda - Menu Drop Down com HTML5 e CSS3

Kimo Gordinho · Julho 21, 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.

lowys · Julho 22, 2017

Olá!

Com css, use o pseudo seletor :hover e coloque um transition com delay de 3s

Kimo Gordinho · Julho 23, 2017

7 horas atrás, lowys disse:

Olá!

Com css, use o pseudo seletor :hover e coloque um transition com delay de 3s

Oooo grande, muito obrigado mas não deu certo.

lowys · Julho 23, 2017

Manda o script aí pra eu observar

Kimo Gordinho · Julho 24, 2017

Tá, tudo bem. Aqui está ó, o de HTML:

<!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><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><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><a href="_html/mídia.html">MÍDIA</a></li>
            <li><a href="início.html">CROSSFIRE Ideal</a></li>
            <li><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><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 o de CSS:

@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;
}

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

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;
}

lowys · Julho 24, 2017

Olá!

Troque o display por opacity e use o delay assim:

nav#menu li ul {
   position: absolute;
   top: 110%;
   left: 0;
   background-color: #fff;
   opacity:0;
   transition:opacity 0s 3s ease;
}
nav#menu li:hover ul, #menu li.over ul {
   opacity:1;
   transition-delay: 0s;
}

assim, quando tirar o mouse de cima, vai demorar 3 segundos pra desaparecer

Kimo Gordinho · Julho 24, 2017

20 minutos atrás, lowys disse:

Olá!

Troque o display por opacity e use o delay assim:

nav#menu li ul {
   position: absolute;
   top: 110%;
   left: 0;
   background-color: #fff;
   opacity:0;
   transition:opacity 0s 3s ease;
}
nav#menu li:hover ul, #menu li.over ul {
   opacity:1;
   transition-delay: 0s;
}

assim, quando tirar o mouse de cima, vai demorar 3 segundos pra desaparecer

Hummmmmm vou tentar aki e já volto com a resposta!
Cara.... MUITO OBRIGADO!! MUUIIIIIITO OBRIGADO MESMO!!!

Agora já posso continuar dando procedimento na minha prática.

E mais uma vez, MUUUIIIIIIIIIIIIIIITO OBRIGADO, DO CORAÇÃO MESMO! muito OBRIGADO CARA! <3 <3 <3 <3

Editado Julho 24, 2017 por Kimo Gordinho

Entrar

Ajuda - Menu Drop Down com HTML5 e CSS3

Pergunta

Kimo Gordinho

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

lowys

Link para o comentário

Compartilhar em outros sites

Kimo Gordinho

Link para o comentário

Compartilhar em outros sites

lowys

Link para o comentário

Compartilhar em outros sites

Kimo Gordinho

Link para o comentário

Compartilhar em outros sites

lowys

Link para o comentário

Compartilhar em outros sites

Kimo Gordinho

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades