Magic Line takes wrong width

i've got this Jquery JS script that takes an UL LI A and adds a magic line underneath it by adding a LI item that follows the hover over a LI; my problem is that this LI takes the with of the LI you are hovering, i need it to take the with of the LI A tag; and i can't figure it out. (basicly because i don't know JS)

<script>
$(function() {

var $el, leftPos, newWidth,
    $mainNav = $("#example-one");

$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");

$magicLine
    .width($(".current").width())
    .css("left", $(".current a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("#example-one li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});

});

Into your hover function your taking the parent of the a, ie. the li tag. Change your function to this :

$("#example-one li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.width();
    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});