水平菜单的单个图像

Question

下面有一个标题和各种水平链接的菜单。我将背景图像扩展到所有这些。我的意思是，我想只有一个图像，而不是像图像一样重复的图像。有谁知道如何做到这一点？

这是fiddle of my failed attempt。

我还尝试在整个div + <title>个菜单项周围添加<ul>，然后只将图片添加到div。那也不起作用。

Answer 1

将此添加到.navMenu ul

的 css

 -webkit-background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
  background-size: 100% 100%;

working demo

由于你float编辑了div，所以不要忘记最后添加.clr{clear:both}类（我添加了它，最后请注意< / em>的）

修改

Final DEMO

你的标题超出了navmenu，所以要把它包装在同一个bg下，你必须把所有东西都放在同一个类......通过{{1}完成它在顶部。

最后是子菜单悬停：

<div id="bg">

这完成了这项工作......