Sub-menu some when taking Javascript mouse

Question

I’m developing a web application and when I hover over Sign in/Register it shows me a submenu with some links, but when I go to one of the submenu links,the submenu disappears, how can I solve this problem ?

$(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>

Answer 1

Good afternoon. First, I find it unnecessary to use Javascript for an application like this, it can be solved only with CSS.

What I did was pass the part of the menu you want to appear inside the "header", and creating a "MENU" class for the same.

In CSS I indicated that when the menu is under the property :Hover, should appear, setting your display to "block".

This way it is better structuring not having to break the menu in several parts.

 .conteudo_dropdow {
  display: none;
}

.conteudo_dropdow {
  margin-top: 0px;
  left: 0;
  width: 75%;
  border: 1px solid black;
  position: absolute;
  background: #fff;
}

.menu:hover .conteudo_dropdow{
  display: block;
}

<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 menu">
  <h4 class="entre">Entre/Cadastre-se</h4>
  <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>
</div>

Answer 2

I had already answered something similar in this answer:

mouseout is triggered when the cursor leaves any child element and of the element itself. The mouseleave is only triggered when the cursor exits of the whole element.

So just change the mouseout for mouseleave:

$(document).ready(function() {
  $(".col-xs-3.col-md-3 .entre").on("mouseenter", function() {
    $(".conteudo_dropdow").show();
  });

  $(".conteudo_dropdow").on("mouseleave", 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>