Estou desenvolvendo uma aplicação web e quando eu passo o mouse por cima do Entre/Cadastre-se ele me mostra um submenu com alguns links, mas quando eu vou ate um dos links do submenu,o submenu desaparece, como posso resolver esse problema ?
$(document).ready(function() {
$(".col-xs-3.col-md-3 .entre").on("mouseenter", function() {
$(".conteudo_dropdow").show();
});
$(".conteudo_dropdow").on("mouseout", function() {
$(".conteudo_dropdow").hide();
});
});
.conteudo_dropdow {
display: none;
}
.conteudo_dropdow {
margin-top: 38px;
left: 0;
width: 75%;
border: 1px solid black;
position: absolute;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-xs-3 col-md-3">
<h4 class="entre">Entre/Cadastre-se</h4>
</div>
<div class="conteudo_dropdow">
<ul class="caixa">
<div class="conteudo">
<li><a href="#">Meus Pedidos</a></li>
</div>
<div class="conteudo">
<li class="caixa_componentes"><a href="#">Efetuar Login</a></li>
</div>
<div class="conteudo">
<li class="caixa_componentes"><a href="#">Alterar Dados</a></li>
</div>
<div class="conteudo">
<li class="caixa_componentes"><a href="#">Sair</a></li>
</div>
</ul>
</div>