Ajuda - Menu Drop Down com HTML5 e CSS3

Kimo Gordinho · July 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 · July 22, 2017

Olá!

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

Kimo Gordinho · July 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 · July 23, 2017

Manda o script aí pra eu observar

Kimo Gordinho · July 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 · July 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 · July 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

Edited July 24, 2017 by Kimo Gordinho

Sign In

Ajuda - Menu Drop Down com HTML5 e CSS3

Question

Kimo Gordinho

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

lowys

Link to comment

Share on other sites

Kimo Gordinho

Link to comment

Share on other sites

lowys

Link to comment

Share on other sites

Kimo Gordinho

Link to comment

Share on other sites

lowys

Link to comment

Share on other sites

Kimo Gordinho

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity