mouseleave event does not work in absolute child element

Question

I have menu list like

<ul class="systeMenus">
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
</ul>

The first ul tag is opening from some other onmouseover event of the link in another frameset frame.

The 2 ul opens by CSS display:block;position:absolute; left:175px; to parent li just like one menu appears inside parent li tag and hides at onmouseout event on the same tag li.

How can I hide these both the ULs when mouseenter on body. As I tried $('body').mouseenter and parent $('ul.systeMenus').mouseleave. Since I am getting problem on both of the implementation.

Any help is appreciated.Kindly provide the solution.

Answer 1

Try using the hover in jquery

Something like that :

$("ul").hover(function(){ //triggered on mouseEnter}, function(){ //triggered on MouseLeave});

I've got a problem in IE one time with mouseEnter and mouseLeave, the hover fixed it.

If it's not working post a fiddle. But by now maybe you have fixed your problem.