$(function(){
        var $el, leftPos, newWidth,
            $mainNav = $("#main_menu");
    
        $mainNav.append("<li id='magic-line'></li>");
        var $magicLine = $("#magic-line");
    
        $magicLine
            .width($(".current_page_item").width())
            .css("left", $(".current_page_item a").position().left)
            .data("origLeft", $magicLine.position().left)
            .data("origWidth", $magicLine.width());
    
        $("#main_menu li a").hover(function() {
            $el = $(this);
            
            var variation = $el.parent().width() * 0.07;
            
            leftPos = $el.position().left - variation;
            newWidth = $el.parent().width() + (2 * variation);
            $magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            });
        }, function() {
            $magicLine.stop().animate({
                left: $magicLine.data("origLeft"),
                width: $magicLine.data("origWidth")
            });
        });
        
    });