I have a navigation on my web page taken from Chris's Magic Line Navigation and the list items should have (but they don't accurately have, read on to know) a sort of underline image on the current item (

like this image

and when a user hovers over any anchor of list item in the navigation, the line animates itself towards the hovered anchor. The problem is that when the current menu item is clicked on, the line gets settled below the current menu item but the line's position from left is not what it should be. The image below will illustrate what i mean.

This image

I am using the following code for this purpose:

function magicNav() {

			$(function() {
			var $el, leftPos, newWidth;
					$mainNav2 = $("#main-nav");

				
				$mainNav2.append("<li id='magic-nav'></li>");
				
				var $magicNav = $("#magic-nav");
				
				$magicNav
					.width($(".current-menu-item").width())
					.height($mainNav2.height())
					.css("left", $(".current-menu-item a").position().left)
					.data("origLeft", $(".current-menu-item a").position().left)
					.data("origWidth", $(".current-menu-item a").width());	
							
				$("#main-nav li a").hover(function() {
					$el = $(this);
					leftPos = $el.position().left;
					newWidth = $el.parent().width();
					
					$magicNav.stop().animate({
						left: leftPos,
						width: newWidth
					});
				}, function() {
					$magicNav.stop().animate({
						left: $magicNav.data("origLeft"),
						width: $magicNav.data("origWidth")
					});    
				});
			});

Following is my CSS for the #magic-nav
Copy code

#main-nav #magic-nav { 
    position: absolute; 
    left: 0; 
    width: 100px; 
    background: url(images/nav-link-bg.png) no-repeat;
    z-index: 100;
    margin: 5px 0;

}

How do i fix this? If you people need more information like css of navigation list, anchors, etc... please let me know.