CSS 导航子菜单和分隔符

Question

我创建了一个以 CSS 为中心的导航栏，它可以正常工作。每个 li 元素都用背景图像的边框分隔。当悬停在导航项上时，分隔符会消失，因为悬停会改变背景(我猜)，但我想知道如何解决这个问题，填充或边距不起作用，因为它只会移动 li 元素。

第二个问题是子菜单项显示不正确，我不知道为什么...

演示:http://jsfiddle.net/Xenios/tfbhh/9/embedded/result/

代码:http://jsfiddle.net/Xenios/tfbhh/9/

我试图让它工作将近一个星期，但我已经厌倦了，所以我在这里寻求支持。

Answer 1

分隔符

如您所知，主栏 (nav_container) 有一个背景图片，它构成了按钮的外观。每个按钮的背景是分隔符，没有别的(右边 10px)。因此，当您的悬停背景显示时，因为它是非悬停背景的公园。

为了解决这个问题，您需要将分隔符放在它自己的 <li> 中, 具有非悬停背景。然后，当您悬停这些元素时，它们可以轻松更改为您当前的悬停图像。

如果你不想分开<li>然后，您将不得不为每个按钮制作单独的全宽图像，但看看您制作此菜单的方式，我怀疑您会想要这样做。

这是您的工作示例(我只做了前几个按钮):http://jsfiddle.net/tfbhh/43/

子菜单

正如我上面提到的，您已经设置了容器背景图像，但您还没有在子菜单项上这样做，所以这就是为什么它们没有更大的按钮。使用您的开发人员工具栏 (F12) 查看样式，这应该会清除它。