[JavaScript][HTML]Magic Line + submenu nie działa. Pomoc w JS. Opcje

[casperii]

Panowie skorzystałem z jednego tutka, tak aby po najechaniu na <li> utworzyć klase z płynnym wyświetleniem linii nad danym <li>.
Wszystko ok, ale jak dodam kolejne podmenu w menu to już się rozjeżdza linia:

obrazek tutaj
Poniżej kod JS:

[HTML] pobierz, plaintext 
<script type='text/javascript'>
$(window).load(function(){
$(function() {
 
    var $el, leftPos, newWidth,
        $mainNav = $("#main-menu");
 
    $mainNav.append("<div id='magic-line'></div>");
    var $magicLine = $("#magic-line");
 
 
 
    $magicLine
        .width($(".top_menu").width())
        .css("left", $(".top_menu").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
 
    $("#main-menu li").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")
        });    
    });
 
 
 
    $('#main-menu li:not("")').hover(
       function(){ $('#magic-line').addClass('hover'); },
       function(){ $('#magic-line').removeClass('hover'); }
);
 
 
});
 
});
</script>
[HTML] pobierz, plaintext 

Ktoś może ma pomysł ?

Ten post edytował casperii 23.01.2016, 15:58:53

[miki22]

Trochę łamię piękną zasadę: "nie wiesz o co biega -siedź cicho!". Bez kodu HTML, który ten JS modyfikuje trochę trudno się zorientować. Ale nasunęło mi się pewne pytanie, które - może - ci pomoże (dlatego zdecydowałem się złamać ową godną polecenia zasadę).
Po co ci wgl ten JS? JS występuje tutaj jedynie jako pośrednik między HTML a CSS. Nie lepiej napisać to w CSS w oparciu o pseudoklasę :hover?