CSS菜单 - 移动栏：出了什么问题？

Question

我想在我的导航中为我的网站实现一个移动栏，但我遇到了一些麻烦。 作为教程，我遵循了这个链接（http://css-tricks.com/jquery-magicline-navigation/）

这是我的结果：http://matt-productions.be/berto/index.html

有人会如此友善地检查出了什么问题吗？

万分感谢！ 马特

Answer 1

首先，#magic-line缺少CSS，因为您的CSS中有一个名为#MagicLine的选择器。

其次，.hover()选择器不正确。它应该将悬停事件绑定到菜单项'child <a>标记$("#example-one li a").hover(function() {，但您已将其绑定到魔术行而不是$("#navMagicLine li a").hover(function() {。这导致 width 计算导致错误的值，这使得魔术线比预期的要长很多。

解决这些问题应更正您的菜单，但将来我建议您再次查看任何示例代码或尝试创建自己的独立演示。通常我发现在尝试在jsFiddle或其他演示站点中创建演示时问题变得清晰： - ）

修改

您的CSS仍然与演示不同。 列表项需要为display:inline-block，否则jQuery将无法计算.width()。 内联元素没有宽度（或高度）。

CSS需要：

#navMagicLine li {
    display: inline-block;
}

.hover()需要位于您的菜单的<a>，而不是动态线。它必须是：

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