jQuery hovering and checking if link is clicked

Question

1. I want to check if the link "meist" is clicked or not, and if it is clicked then change the submenu to submeist. So if you hover your mouse out then it will automatically go back to the submeist menu

2. The submenu will disappear when I want to click something on the submenu. I couldn't figure out the fix for it either.

$(document).ready(function() {
  $("#meist").mouseleave(function() {
    $("#submeist").hide();
    return false;
  });

  $("#meist").mouseenter(function() {
    $("#submeist").show();
    return false;
  });

  $("#seadmed").mouseleave(function() {
    $("#subseadmed").hide();
    return false;
  });

  $("#seadmed").mouseenter(function() {
    $("#subseadmed").show();
    return false;
  });
});

#meist {
  display: inline;
  float: left;
  width: 180px;
  height: 50px;
  color: #191919;
  text-align: center;
  overflow: hidden;
  background: #990000;
  -moz-border-radius-top-left: 50px;
  border-top-left-radius: 50px;
}

#meist:hover {
  text-decoration: underline;
  color: white;
  font-size: 17.5px;
  line-height: 15px;
}

#seadmed {
  display: inline;
  float: left;
  width: 180px;
  height: 50px;
  color: #191919;
  text-align: center;
  overflow: hidden;
  background: #990000;
}

#seadmed:hover {
  text-decoration: underline;
  color: white;
  font-size: 17.5px;
  line-height: 15px;
}

#submenu {
  color: white;
  height: 25px;
  width: 900px;
  background: #630000;
  margin-top: 50px;
}

#submeist {
  display: none;
  font-size: 12px;
}

#submeist .asi1 {
  margin-left: 70px;
  height: 25px;
  width: 75px;
}

#submeist .asi2 {
  margin-left: 25px;
}

#submeist .asi3 {
  margin-left: 25px;
}

#subseadmed {
  display: none;
  font-size: 12px;
}

#subseadmed .item1 {
  margin-left: 70px;
  height: 25px;
  width: 75px;
}

#subseadmed .item2 {
  margin-left: 25px;
}

#subseadmed .item3 {
  margin-left: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
  <li id="meist">
    <p><a href="meist.html">Meist</a></p>
  </li>
  <li id="seadmed">
    <p><a href="seadmed.html">Seadmed</a></p>
  </li>
</ul>

<div id="submenu">
  <ul id="submeist">
    <li class="asi1">
      Asi 1
    </li>
    <li class="asi2">
      Asi 2
    </li>
    <li class="asi3">
      Asi 3
    </li>
  </ul>

  <ul id="subseadmed">
    <li class="item1">
      Item 1
    </li>
    <li class="item2">
      Item 2
    </li>
    <li class="item3">
      Item 3
    </li>
  </ul>
</div>

Answer 1

I guess you can delay the hide que by adding

 $("#meist").mouseleave(function () { 
    $("#submeist").delay(1000).hide('fast');
    return false; 
});

and

   $("#seadmed").mouseleave(function () { 
    $("#subseadmed").delay(1000).hide('fast');
    return false; 

Be careful delaying a que. Add it only if necessary. This can be one of the temporary solution, this is not the only solution.

Increase the timing to hide the Submenu's based on the requirement.