How to stopPropagation for element overlapping other element but not child of it
<p>I have a menu generated by WordPress. On sub menus creates next to an a element an ul.sub-menu element.
I want to use slideToggle animation for it(I will end up using hoverFlow plugin in the end, but when will behave as it should). </p>

<p>The order should be: [a.mouseenter][show menu], [a.mouseleave][but not over ul.submenu][hide menu], [ul.sub-menu.mouseleave][hide menu]</p>

<p>The problem is the a.mouseleave is triggered when mouse is over ul.submenu. </p>

<p>The only thing I have is that ul element overlaps a little over a element, it has position absolute.</p>

<p>I can't use stopPropagation because ul.sub-menu is not a child of a element.</p>

<p>For now the code I use</p>

<pre><code>jQuery(function($) {

// will completely cover the a hovered element 
$('#access .sub-menu').append('&lt;div style="
position: absolute;
top: -105px;
right: -2px;
height: 106px;
width: 92px;
background-image: url('images/transp.gif');
"&gt;&lt;/div&gt;');

$('#access a').hover(function(){
    $(this).next('.sub-menu').hide().slideToggle();
},function(){
    $(this).next('.sub-menu').hide();
});

$('#access .sub-menu').hover(function(){
    $(this).show();
},function(){
   $(this).slideToggle();
}); 

});
</code></pre>

<p>html:</p>

<pre><code>&lt;ul&gt;
&lt;li id="menu-item-198" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-198"&gt;
&lt;a href="/?page_id=194"&gt;Shop Online&lt;/a&gt;
&lt;ul class="sub-menu"&gt;
    &lt;li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248"&gt;&lt;a href="/?page_id=230"&gt;Products&lt;/a&gt;&lt;/li&gt;
    &lt;li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275"&gt;&lt;a href="/?page_id=263"&gt;Procedures&lt;/a&gt;&lt;/li&gt;
    &lt;li id="menu-item-284" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-284"&gt;&lt;a href="/?page_id=279"&gt;Gift Cards&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
