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）查看样式，这应该清除它。

Answer 2

您可以在li上使用等于分隔符宽度的左边距，并仅更改a上的背景。另外我注意到你在除了第一个列表项之外的所有项目上都使用了class="separator"。您可以使用:first-child伪选择器替换它。然后你会得到这样的东西：

li:first-child { padding-left: 0; background: transparent; }
li { padding-left: 3px; background: url(separator.png) no-repeat; }
li a { line-height: 40px; padding: 0 15px; }
li a:hover { background: url(anchor-hover.png) repeat-x; }

编辑：上面的CSS涵盖了此解决方案的核心样式。这是一个工作示例（使用背景颜色）：

http://jsfiddle.net/haa5X/3/

完整的CSS：

ul { overflow: hidden; background: green; }
li:first-child { padding-left: 0; }
li { padding-left: 3px; float: left; background: red; }
li a { float: left; line-height: 40px; padding: 0 15px; background: yellow; }
li a:hover { background: purple; }

完整的HTML：

<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>

编辑2 ：抱歉，错过了子菜单的一部分：

http://jsfiddle.net/haa5X/4/

完整的CSS：

ul { overflow: hidden; margin: 0; background: green; }
ul > li:first-child { padding-left: 0; }
ul > li { padding-left: 3px; float: left; background: red; }
ul > li a { float: left; line-height: 40px; padding: 0 15px; background: yellow; }
ul > li a:hover { background: purple; }

li ul { display: none; position: absolute; margin-top: 40px; }
li:hover ul { display: block; }
li li { padding-left: 0; float: none; display: block; }
li li a { float: none; display: block; width: 100%; }

完整的HTML：

<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
  <ul>
  <li><a href="#">First sub item</a></li>
  <li><a href="#">Sub item 2</a></li>
  <li><a href="#">Last sub item</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>

CSS导航子菜单和分隔符

2 个答案:

分隔符

子菜单