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

Question

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.