Collapsing submenus, when I have multiple menus

Collapsing submenus, when I have multiple menus

I have a page with several JqueryUI menus, which are dynamically created. 
The problem I'm having is if I hover over one menu, and expand a sub menu, then navigate away from that menu onto another menu, the original submenu isn't collapsing. I end up with one menu overlapping another and hiding it. Perhaps a screen shot will help. See below. The red arrows indicate the path my mouse took:





My first thought was to check the menufocus, or menublur events for each menu, and fire off collapseall for every other menu like this:

$( "#bmenuP_GenMnu" ).on( "menufocus", function( event, ui ) {
$( "#bmenuP_MainMnu" ).menu( "collapseAll", null, true );
$( "#bmenuP_AluMnu" ).menu( "collapseAll", null, true );
$( "#bmenuP_Dev_Off_Mnu" ).menu( "collapseAll", null, true );
$( "#bmenuP_StuMainMnu" ).menu( "collapseAll", null, true );
$( "#bmenuP_FacMainMnu" ).menu( "collapseAll", null, true );
$( "#pmenuP_MainMnu" ).menu( "collapseAll", null, true );
$( "#bmenuP_FinanceMnu" ).menu( "collapseAll", null, true );
$( "#bmenuP_ProxyMenu" ).menu( "collapseAll", null, true );
$( "#bmenuP_WebTailorMnu" ).menu( "collapseAll", null, true );
} );



But, I can have up to 10 menus on one page, depending on the role and permissions of the person logged in. So, every time a menufocus (or blur) event occurs, there's a LOT of code that's running in the background, and it really bogs down the page.

Is there a better way to collapse menu a, if menu b or c or d or e (etc...) gain focus?

TIA!