CSS菜单-移动栏:怎么了?[已关闭]

首先,CSS对于 #magic-line 因为您有一个名为 #MagicLine 在您的CSS中。

第二 .hover() 选择器不正确。它应该绑定 悬停 事件到菜单项的子项 <a> 标签 $("#example-one li a").hover(function() { 但你却把它绑在了魔法线上 $("#navMagicLine li a").hover(function() { 。这导致 宽度 计算导致错误的值,这使得幻线比预期的长得多。

解决这些问题 应该 更正您的菜单,但在将来我建议您再次查看任何示例代码,或者尝试创建自己的独立演示。我经常在尝试创建演示时发现 jsFiddle 或另一个问题明确的演示网站:-)

编辑:

您的CSS仍然与演示不一样。这个 列出项目 需要 display:inline-block 否则jQuery将无法计算 .width() . 内联 元素没有宽度(或高度)。

CSS需要:

#navMagicLine li {
    display: inline-block;
}

这个 .heverver() 需要在 <a> 属于 你的 菜单,而不是动态行。它需要:

$("#navMagicLine li a").hover(function() {
    // function body
})