>>A mouseout event will fire but intervening ones may be skipped.
>
>Correct
>
>>Can you clarify 'the logic determines that one of the two needs to become hidden' and show a simple html of the divs involved ?
>
>I succeeded to bring this down to a very simple, simpler, page to use for this test sequence.
>
>You will have two labels on top. If you move the mouse over the labels, a menu appears. You may add a background color to the place holder div to understand better what I am saying. The place holder is tied to its menu but cannot be in it as its width varies based on the label. So, a transparent div is used over the label so we know that when the mouse moves out of the placeholder, that this is also considered a menu mouseout. So, we have two mouseout to watch for. There is the placeholder and the menu. There is some logic to verify that a mouseout going down the placeholder, thus over the active menu, won't trigger a deactivate. Then, in reverse, a mouseout of the menu, going over the placeholder, won't trigger a deactivate also.
Seems like your trying to reinvent the wheel. Bootstrap (with a minor style change to handle hover) will do the job with no javascript required. This is all you will need:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Menu</title>
<style>
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
</style>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-2.2.3.js"></script>
<script src="Scripts/bootstrap.js"></script>
</head>
<body>
<ul class="nav nav-pills">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Récent<b class="caret"></b></a>
<ul class="dropdown-menu" id="menu1">
<li><a href="#">Obtenir les messages d'aujourd'hui</a></li>
<li><a href="#">Afficher tous les fils ayant de l'activité durant les deux derniers jours</a></li>
<li><a href="#">UnansweredStatus</a></li>
<li><a href="#">Affiche les nouveaux threads depuis les cinq derniers jours</a></li>
</ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Report<b class="caret"></b></a>
<ul class="dropdown-menu" id="menu1">
<li><a href="#">Obtenir tous les J'aime pour tous les messages</a></li>
<li><a href="#">Répartition des usagers</a></li>
<li><a href="#">Répartition des usagers pour les États-Unis</a></li>
<li><a href="#">Etc</a></li>
</ul>
</li>
</ul>
</body>
</html>
