Menu with Hover CSS

Question

I am developing a web application and would like that when you hover over the <h4 class="entre">Entre/Cadastre-se</h4> show the menu of the named class <div class="conteudo_dropdow"></div>.

@media  (max-width: 730px) {
.cadastro:hover{
	background:rgb(44,62,80);
	border:rgb(44,62,80);
	color: white;
	-moz-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
				transition: all 0.5s ease;
	
}

 .conteudo a:hover{
    font-size: 14pt;
color: blue;
	 font-family: 'Fixation';
          
        }


        .conteudo a:link {
            color: black;
	 font-family: 'Fixation';
            text-decoration: none; 
           
        }

        .conteudo a:visited { 
			color: black;
	 font-family: 'Fixation';
            
          
        }
        .conteudo a :active {
           color: black;
	 font-family: 'Fixation';
            color: #00008B;
        }
.cadastrese{
	 font-family: 'Fixation';
	font-size: 15pt;
	margin-left: 300px;
	margin-top: -160px;
}
.cadastro{
	margin-left: 340px;
	margin-top: 16px;
	background-color: white;
	width: 130px;
	height: 45px;
	color: black;
	font-weight: 700;
	border-radius: 5px;
}

.caixa{
	
	border: 1px solid #dedddd;
	margin-rigth: 2500px;
	padding: 32px;
}
.caixa_componentes{
	margin-top: 10px;
	
}
}

	<header>
		<div class="container-fluid">
		<div class="row">
			<div class="col-xs-3 col-md-3">
<button type="button" class="botao_menu_celular">MENU</button><img src="imagens/bolos.JPG" class="imagem_header">
			</div>
			
			<div class="col-xs-3 col-md-3">
<div class="campo_busca"><input type="text"id="busca"><i class="fa fa-search"></i></div>
			</div>
			
			<div class="col-xs-3 col-md-3">
<h4 class="entre">Entre/Cadastre-se</h4> 
			</div>
		
			
				
			<div class="col-xs-3 col-md-3">
 <h4 class="fale">Duvidas/Fale conosco</h4> 
			</div>
			
			</div>
		</div>
	</header>
  
  
  	<div class="container-fluid">
	<div class="row">
		<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>
		<h4 class="cadastrese">Não é Cadastrado? Cadastre-se</h4>
<button type="button" class="cadastro">Cadastro</button>
		
	</div>

	</div>
	</div>

When hovering over Login/Register the sub-menu appears.

When going to the sub-menu, the sub-menu disappears

Answer 1

First we need to hide the .conteudo_dropdow adding to the CSS:

.conteudo_dropdow{
   display: none;
}

Then you can use the method mouseenter to open the submenu and the mouseleave to hide:

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

$("div.conteudo_dropdow").on("mouseleave", function(){
    $(".conteudo_dropdow").hide();
});

@media  (max-width: 730px) {
.cadastro:hover{
background:rgb(44,62,80);
border:rgb(44,62,80);
color: white;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.conteudo a:hover{
font-size: 14pt;
color: blue;
font-family: 'Fixation';
}

.conteudo a:link {
color: black;
font-family: 'Fixation';
text-decoration: none; 
}

.conteudo a:visited { 
color: black;
font-family: 'Fixation';
}

.conteudo a :active {
color: black;
font-family: 'Fixation';
color: #00008B;
}

.cadastrese{
font-family: 'Fixation';
font-size: 15pt;
margin-left: 300px;
margin-top: -160px;
}

.cadastro{
margin-left: 340px;
margin-top: 16px;
background-color: white;
width: 130px;
height: 45px;
color: black;
font-weight: 700;
border-radius: 5px;
}

.caixa{
border: 1px solid #dedddd;
margin-rigth: 2500px;
padding: 32px;
}
.caixa_componentes{
margin-top: 10px;
}
}

.conteudo_dropdow{
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-md-3">
<button type="button" class="botao_menu_celular">MENU</button><img src="imagens/bolos.JPG" class="imagem_header">
</div>

<div class="col-xs-3 col-md-3">
<div class="campo_busca"><input type="text"id="busca"><i class="fa fa-search"></i></div>
</div>

<div class="col-xs-3 col-md-3">
<h4 class="entre">Entre/Cadastre-se</h4> 
</div>
<div class="col-xs-3 col-md-3">
<h4 class="fale">Duvidas/Fale conosco</h4> 
</div>
</div>
</div>
</header>

<div class="container-fluid">
<div class="row">
<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>
<h4 class="cadastrese">Não é Cadastrado? Cadastre-se</h4>
<button type="button" class="cadastro">Cadastro</button>
</div>
</div>
</div>

If you want to use some effect, you can replace the .show() for .slideDown() or .fadeIn(), for example.