Magic Line CSS/Javascript 代码 - 添加子导航

Question

我正在将这个“Magic Line”代码实现到我的导航菜单中，但是在添加子菜单时我似乎遇到了麻烦。当您将鼠标悬停在任何子菜单项上时，魔术线会一直射到页面的左侧。我希望它留在子菜单所在的菜单项上。

您可以在这里查看我的网站：http://www.christmaslightsinstallation.ca/

原始脚本（无子导航）：http://css-tricks.com/examples/MagicLine/

（我为此尝试了一个小提琴，但由于它在 wordpress 中翻译得不是很好）

我的javascript如下：

$(function() {

var $el, leftPos, newWidth,
    $mainNav = $("#menu-main-menu");

$testing = $(".menu-header");

$testing.append("<span id='magic-line'></span>");
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());

$("#menu-main-menu li a").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")
    });    
});
});

我尝试使用“#menu-main-menu li li a”创建第二个悬停功能，并尝试使用“preventdefault();”事件。这只是造成了大量的错误。

我对 javascript 还很陌生，所以我能想到/知道如何做的事情有限，试图解决这个问题。

Answer 1

$("#menu-main-menu li a").hover(function() {

将上面的行改为：

$("#menu-main-menu > li").hover(function() {

编辑：

也改变：

newWidth = $el.parent().width();

到：

newWidth = $el.width();