$(function(){

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

    /*
        EXAMPLE ONE
    */
    $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());

    $("ul.group li a").hover(function() {

        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();

                        $("ul.group li").hover(function() {
                        $(this).addClass("hover");                                                              
                        $('ul:first',this).css('visibility', 'visible');
                        $('ul:first',this).css('left', leftPos);
                        },function() {
                        $(this).removeClass("hover");
                        $('ul:first',this).css('visibility', 'hidden');
                        }),

        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth,
        });

    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });

        $("ul#subMenu li").hover(function() {
                $magicLine.stop().animate();
                $("#magic-line").css('visibility', 'hidden');

         }, function() {
                $("a.suba").css('color', '#fff'); 
                $("#magic-line").css('visibility', 'visible');
                leftPos = $el.position().left;
        newWidth = $el.parent().width();

        });

});