How to hide and show secondary header based on hover icon in primary header-CodePudding

i am trying to make two headers, the secondary header that has navigation is hidden. there is icon in the primary header. when i hover that icon the secondary header is shown, but when i remove the cursor from that icon the secondary header is also hides.

I want that the when i hover the icon the secondary header must be shown and not hide unless i remove the cursor from that secondary header.

what I have tried so far.

css

.active{
  display: block;
}
#menu_header{
  position: absolute;
  width: 100% !important;
  top: 0;
  background: red;
  display: none;
}

JQuery

jQuery(document).ready(function( $ ){
  $('#menu_header').hover(function(){
    $(this).addClass('active');
  }, function(){
    $(this).removeClass('active');
  })

  
  $('#hover_button').mouseenter(function() {
    $('#menu_header').show();
  }).mouseleave(function() {      
    if(!$('#menu_header').hasClass('active')){
      $('#menu_header').hide();
    }
  });
});

Please help me. Thanks in advance.

CodePudding user response：

In the solution I developed, when the mouse hovers over the <h1> element, the <h2> element is displayed. To hide the <h2> element, the mouse must hover over the <h2> element and the mouseleave event must occur on the <h2> element. Alternative solutions that can be used:

The <h2> element is displayed when the cursor is over the <h1> element. Hiding the <h2> element requires a timeout and/or a mouseleave event on the <h2> element.
Only the <h1> element mouseenter and mouseleave events can be used to hide and show the <h2> element.

jQuery(document).ready(function( $ ){
  /* Edited the following line of code. */
  $('#menu_header').hover(function(){
    $('#menu_header').addClass('active');
  });
  
  /* Added the following line of code. */
  $('#menu_header').mouseleave(function(){
    $('#menu_header').addClass('passive');
    $('#menu_header').hide();
  });

  $('#hover_button').mouseenter(function() {
    $('#menu_header').show();
  });
});

.active{
  display: block;
}

#menu_header{
  position: absolute;
  width: 100% !important;
  top: 0;
  background: red;
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <link rel="stylesheet" href="style.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="main.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <title>Print-Shop Contact</title>
 </head>
 <body>           
    <h1><i id="hover_button" ></i></h1>
    <h2 style="margin-top: 100px;" id="menu_header">TEST</h1>
 </body>
</html>