You could use something like this to hide/show your second menu when a sub menu of your first menu is activated:
var $mainMenu2 = $('#main-menu2');
$('#main-menu').on({
'show.smapi': function(e, menu) {
$mainMenu2.css('visibility', 'hidden');
},
'hideAll.smapi': function(e, menu) {
$mainMenu2.css('visibility', '');
}
});
But I’d suggest a more elegant solution – i.e. to just alter the first menu’s z-index
so that its sub menus simply appear on top of the second menu:
$('#main-menu').on({
'show.smapi': function(e, menu) {
$(this).css('z-index', 10000);
},
'hideAll.smapi': function(e, menu) {
$(this).css('z-index', '');
}
});