如何在图像上方的HTML/CSS中创建水平导航？

在我的标题中，我有一张大图。在该图像上方，我要放置导航。 关于它的线索：ul导航元素有一个渐变背景。但是如果我将鼠标悬停在li导航链接上，我希望显示底层图像！（希望这是清楚的？否则我会做一些photoshop来演示）这应该是灵活的，这意味着不给每个li元素一个特定的片段作为背景图像

我更喜欢JS解决方案，而不是凌乱的标记。但我很感激你脑子里的每一个想法。也许我只是忽略了最明显、最简单的解决方案

致意（：

以下是我试图描述的图像。希望能有所帮助：

---

JS不需要这样做，只要将鼠标悬停在li导航链接上，元素就不会设置背景属性

---

这将创建您想要实现的“透明度”。

您可以对

a:hover

使用

background:transparent

。这将显示背景

（对于internet explorer，您可以使用

过滤器：alpha（不透明度=100）

）

---

这里有一个示例：

我刚刚解决了javascript/jquery的问题。可以在这里找到。

示例图像会有所帮助，我不确定我是否理解。我假设您的意思是导航覆盖了图像，而不仅仅是导航位于上方（垂直方向）在页面上？我猜我的描述不够好。我很难用英语描述它。我想让ul用渐变填充整个屏幕！所以当鼠标悬停时，应该将ul背景隐藏在它的位置上。多有用的网站。谢谢（；但是我怎么能把你给的li的渐变添加到条的其余部分呢？它应该水平填充整个页面。此外，我也需要在li的左边添加渐变，因为它不应该放在最左边。