I have a submenu that appears on hovering over a <li> and disappears on hovering out. Within that submenu, I am using the jquery ui sortable widget to allow sorting of the submenu's <li>'s. Works great in all browsers except firefox. In firefox, as soon as I drop an item, the hover out event is triggered and the submenu disappears, even though I have not hovered out. Any ideas how to fix this?
I use the following on the sortable <ul>:
$("#mmc-sortable").sortable({ helper: "clone" });
$("#mmc-sortable").disableSelection();
And here is my hover over/out function:
var intSideSubMenuHoverTimer;
$('.mmc-hassub').hover(
function() {
var objSideSubMenuHoverObject = $(this);
intSideSubMenuHoverTimer = setTimeout(function(){
objSideSubMenuHoverObject.find('.mmc-subsubmenu').animate({width: 'show'});
}, 500);
},
function() {
var objSideSubMenuHoverObject = $(this);
objSideSubMenuHoverObject.find('.mmc-subsubmenu').animate({width: 'hide'});
clearTimeout(intSideSubMenuHoverTimer);
}
);
And here is the html (basically):
<ul>
<li><a href="x">X</a></li>
<li><a href="y">Y</a></li>
<li class="mmc-hassub">
<a href="z">Z</a>
<div class="mmc-subsubmenu">
<ul id="mmc-sortable">
<li><a href="a">A</a></li>
<li><a href="b">B</a></li>
<li><a href="c">C</a></li>
</ul>
</div>
</li>
<li><a href="q">Q</a></li>
</ul>
I would greatly appreciate any help that can be given on this. Thanks!