$(function(){

    var $el, leftPos, newWidth,
        $mainNav = $("#navs");
    
    $mainNav.append("<li id='nav_bg'></li>");
    
    var $magicLine = $("#nav_bg");
    
    $magicLine
        .width($(".selt").width())
        .css("left", $(".selt .a1").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
        
    $(".li1").hover(function() {
        $li = $(this);
        $el = $li.find(".a1");
        $el.css({"text-transform":"uppercase","font-size":"18px"});

        leftPos = $el.position().left;
        newWidth = $el.parent().width();
       
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        },function(){            
           if($li.find(".sub").size()==0){
               $li.append($("#nav2_"+$el.attr("id")));
           }
           $li.find(".sub").show();
        });
    }, function() {
        if(!$(this).hasClass("selt")){
            $el.css({"text-transform":"none","font-size":"14px"});
        }
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });   
        $(".sub").hide(); 
    });
});