Search the Community
Showing results for tags 'menu dropdown'.
Found 2 results
-
Oi pessoal. Estou criando um menu e estou com certa dificuldade. Nos itens que "vão para baixo" há um espaço em branco na esquerda que não consigo tirar de jeito nenhum, como vocês podem ver na imagem. Meus códigos HTML e CSS estão logo abaixo. Se puderem me ajudar, agradeceria muito :) <body> <div id="banner"> </div> <div id="menu"> <nav> <ul class="menu"> <li><a href="#">Index</a> </li> <li><a href="#">A Série</a> </li> <li><a href="#">Personagens</a> <ul> <li><a href="#">Ted Mosby</a></li> <li><a href="#">Robin Scherbatsky</a></li> <li><a href="#">Barney Stinson</a></li> <li><a href="#">Marshall Eriksen</a></li> <li><a href="#">Lily Aldrin</a></li> </ul> </li> <li><a href="#">Episódios Especiais</a> </li> <li><a href="#">Entre em contato</a> </li> </div> .menu{ list-style:none; } .menu li{ position:relative; float:left; } .menu li a{ color:black; text-decoration:none; padding:10px 85px; display:block; } .menu li a:hover{ background:#4C7EA5; color:#fff; text-shadow:0px 0px 5px #fff; } .menu li ul{ position:absolute; top:100%; left:0; background-color:#fff; display:none; } .menu li:hover ul, .menu li.over ul{ display:block; } .menu li ul li{ display:block; width:100%; }
-
Oi galera. Beleza? Faz um tempo que não mexo com CSS e quase esqueci tudo. kkk Comecei num projeto para treinar e achei um problema que não consigo resolver. Fiz um menu dropdown básico, e preciso animar o dropdown, mas não consigo de jeito algum. Tentei utilizar o transition mas não vai de maneira alguma. Deem uma olhada no código e vê se é possivel me dar uma ajuda. Valeu! Boa semana. Código HTML: <nav> <div class="dropdown"> <button class="dropbtn"><a href="#"></a>MENU</button> <div class="dropdown-content"> <a href="#">Página Inicial</a> <a href="#">Como funciona?</a> <span><img style="width:32px; height:32px;" src="img/default.png"/>Seja bem vindo, Vítor.</span> <a class="log1" href="#">Perfil<span style="padding:0; float:right; color:#FFF;" class="oi" data-glyph="person"></span></a> <a class="log2" href="#">Sair<span style="padding:0; float:right; color:#FFF;" class="oi" data-glyph="account-login"></span></a> </div> </div> </nav> Código CSS: .dropbtn { background:url(../img/space.png); width:90px; height:50px; text-align:right; color: white; padding:0px; font-size: 19px; border: none; cursor: pointer; margin-top:0px; outline:none; -webkit-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); -moz-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); -o-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */ float:left; } .dropbtn a { width:28px; height:21px; margin-top:3px; background: url(../img/three.png); float:left; } .dropbtn:hover { opacity:0.5; } .dropdown { float:left; width:95px; height:50px; margin-top:20px; position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: block; position: absolute; top:50px; background-color: #131920; min-width: 250px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { color: #fff; padding: 12px 16px; text-decoration: none; font-weight: 300; font-size:15px; display: block; border-bottom:1px solid #0E1319; } .dropdown-content span { color: #7D9EC4; padding: 12px 16px; text-decoration: none; font-weight: 300; font-size:15px; display: block; } .dropdown-content img { margin-right:10px; vertical-align: middle; } /* Change color of dropdown links on hover */ .dropdown-content a:hover { background-color: #19222B; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; }
