html - 带有渐变图像背景的 WordPress 子菜单悬停在父 LI 和子 LI 的上方(子菜单 UL)

Question

我有下一个情况/菜单:http://inturnets.com/test/

这是一个 WordPress 生成的菜单结构。

请将鼠标悬停在“菜单#1”上。当鼠标悬停时，我需要菜单 #1、菜单 #1 - 1 和菜单 #1 - 2 看起来像 http://inturnets.com/test/images/whatineed.jpg

它有一个带有渐变效果的背景图像。它应该在悬停时从菜单顶部开始，从菜单#1 的顶部开始，到子菜单 UL 的 LI 结束。当 bg 图像结束时(不重复)应该从底部的最后一个像素继续颜色。在我们的示例中，为了获得更好的视觉体验，让我们使用 #ff0000 :)

有没有人知道如何解决这个问题？

现在我尝试了下一个 css 代码:

#menu-top-navigation ul:hover { background: url(images/bg-menutest.jpg) repeat-x center top; }

但是正如您所见，悬停时只有 LI 被覆盖。我的意思是子菜单 UL。我认为我们需要一个用于悬停 LI 的悬停规则，一些带半径的圆 Angular 和另一个用于具有 Angular 半径的子菜单 UL 的悬停规则，并从顶部到底部看起来具有连续性，就像它在链接图像上看起来一样。

Answer 1

尝试使用这样的选择器指定背景颜色:

#menu-top-navigation > li:hover 

这样，您应该能够为整个 LI 内容指定一个渐变(在您的情况下为 UL 和 LI)。强烈推荐使用 CSS3 渐变。

如果这对您没有帮助，您可能需要为

指定渐变

#menu-top-navigation > li:hover {gradient color of XXX to YYY}

还有一个用于

#menu-top-navigation > li:hover > ul {gradient color of YYY to ZZZ}

注意:gradient spec 只是一个例子，它不是实际的语法。只是想让它更容易理解。

如果您有任何问题，请告诉我。