In firefox, jquery ui sortable mistakenly causes hover out event while sorting.

In firefox, jquery ui sortable mistakenly causes hover out event while sorting.

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!