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});