Question

Would you mind to take a look at my jsfiddle?

As you can see, I putted a horizontal line below an active list item anchor.
I want the horizontal line to be at the bottom** of an anchor, just like a border-bottom when hovering, not at where my cursor stands. Can anybody help me out?

Thank you in advanced!
With Kind Regards,
Jonathan

Answer 1

The problem is because you were using an li element for the line that it was stopping the mouseover of the ul and reversing the animation. Instead use a div inside a containing element, with a lower z-index to stop it intercepting the mouseover event.

HTML:

<div id="container">
    <ul>
        <li><a href="#">sub nav</a></li>
        <li><a href="#">sub nav</a></li>
        <li><a href="# "class="active">sub nav</a></li>
        <li><a href="#">sub nav</a></li>
    </ul>
</div>

Amended javascript:

var animation = $('<div>').css({
    'position': 'absolute',
    'height': active.outerHeight()-1,
    'width': active.outerWidth(),
    'marginTop': (active.parent().index() * active.outerHeight()),
    'borderBottom': '1px solid #000',
    'z-index': -10
});

Example fiddle

Also, you need to make the border-bottom transparent on the ul li a elements for the line to show through them. You could use margin-bottom: 1px if you prefer.