javascript - red line hover effect on navigation javascript

Question

i have a main navigation on the header and a footer navigation. But i will only have main navigation on the Header and the footer navigation to put out. But if put out the footer navigation, the main navigation "red line" hover effect doesn't work because the main navigation related with the footer navigation and i don't know whats the problem..

Here my Testsite:

http://topkosmetikstudios.de/release/index.php?article_id=1

here my javascript Code:

function header_menu_line() {
    "use strict";
    var $el, leftPos, newWidth;
    $("#magic-line").remove();
    $("#main_menu").append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");
    $magicLine
        .width($(".current_menu_ancestor").width())
        .css("left", $(".current_menu_ancestor a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
    $("#main_menu > li").hover(function() {
        $el = $(this).find("a");
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        }, 300);
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        }, 300);    
    });
}

Answer 1

我会检查您的目标是 .current_menu_ancestor，您也在页脚中使用该类，并且您没有专门针对页眉；可能会扔东西。