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

I would check where you are targeting .current_menu_ancestor, you are using that class in the footer as well and you aren't targeting specifically for the header; something there might be throwing it.