0

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

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

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

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

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

4

2 回答 2

1

分隔器

如您所知，主栏 ( nav_container) 有一个背景图像，它构成了按钮的外观。每个按钮的背景是分隔符，没有其他内容（右侧 10 像素）。所以，当你的悬停背景显示时，因为它是非悬停背景的公园。

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

如果你不想分离<li>元素，你将不得不为每个按钮制作单独的全宽图像，但是看看你制作这个菜单的方式，我怀疑你会想要这样做.

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

子菜单

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

于 2012-09-15T15:00:18.493 回答
0

您可以在 上使用等于分隔符宽度的左填充，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>

​</p>

于 2012-09-15T13:32:16.710 回答