jquery flyout menu triangle hover

Question

I have built a fly-out menu and have a few problems with mouseover mouseleave mousemove. For orientation I use a triangle for the frist level ( inside the link). Everything works well. If I'm above the link the fly-out opens but when I pass the triangular the menu closing and open again. I do not understand why because the triangle is part of the link.

here the example

<a href="#" class="ml1a">Level 1<span class="arrow"></span></a>

$('.ml1a').mouseover(function(){
var num = this.id.replace('ml1aButton-','');
$(this).parent('li').addClass('ml1liHover');
$('.navMainOverlay').hide();
$('#mainNavOverlay-'+num).fadeIn(300);
});

Answer 1

You seem to have placed your arrow inside the link with the mouseover effect.

<a href="#" class="ml1a">Level 1<span class="arrow"></span></a>

It will trigger when you move your mouse over Level 1 or <span class="arrow"></span>.

Edit

A few options that comes to mind:

1)

Enclose Level 1 and the arrow in a container, then only add mouseover to Level 1. Then you can position the arrow in relation to the container instead of the link.

<div><a href="#" class="ml1a">Level 1</a><span class="arrow"></span></div>

2)

Add stopPropagation to the mouseover event of the arrow. This way everything else will be ignored when moving the mouse over the arrow.

$('.arrow').mouseover(function(event) {
    event.stopPropagation();
});

3)

Absolute position the arrow with jQuery. Probably not the way I would go with, but it's an option.

$('.arrow').css({top: positionOflink.top + 20, left: positionOflink.left + 50});