1

Estou querendo criar um menu com Dropdown em que quando eu passar o mouse no meu menu ele aparecera um sub menu com os link um em baixo do outro peguei como exemplo no site do https://www.w3schools.com/howto/howto_css_dropdown.asp mas ao passar o mouse por cima do Entre/Cadastre-se ele não mostra o sub menu.

inserir a descrição da imagem aqui

<div class="col-6 col-md-4">

            <ul class="menu_2">
                <div class="user"><li><i class="fa fa-user"></i> Entre/Cadastre-se<i class="fa fa-angle-down"></i></li></div> 
                <div class="carrinho"> <li><i class="fa fa-shopping-cart"> </i></li></div>

            </ul>

<div class="dropdown">

<div class="dropdown-content">
<a href="#">Meus Pedidos</a>
<a href="#">Meus Dados</a>
<a href="#">Fale Conosco</a>
<div class="linha"></div>
<button  class="dropbtn">Entrar</button>
<a href="cadastro.jsp"> Cliente novo? Cadastre-se</a>
 </div>
 </div>
        </div>

 .dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
 }

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
 }


 .linha{
border-bottom: 1px solid #E0E0DA;   

 }

1 Resposta 1

4

Se for bem o que entendi, coloque o <button> acima de <div class="dropdown-content"> e veja a mágica acontecer:

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
 }

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
 }


 .linha{
border-bottom: 1px solid #E0E0DA;   

 }
<div class="dropdown">
 <button class="dropbtn">Entre/Cadastre-se</button>
  <div class="dropdown-content">
    <a href="#">Meus Pedidos</a>
    <a href="#">Meus Dados</a>
    <a href="#">Fale Conosco</a>
    <div class="linha"></div>
   
    <a href="cadastro.jsp"> Cliente novo? Cadastre-se</a>
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .