WP CSS重叠菜单子菜单无法摆脱背景图片

Question

我按照这个名为“重叠选项卡”的教程来构建 WordPress。这真的很好，而且效果很好。 http://www.codealamode.net/overlapping-tabs

但是，与教程不同的是，我现在添加了下拉子菜单。它们也很好用，除了由于某种原因主要的父背景选项卡被带到子菜单中，即使在 css 中没有重复。

我已经寻找演示并尝试在 css 中切换内容，但我把事情弄得一团糟。

这里是 CSS。我不希望子菜单像主父菜单那样具有背景图像。 CSS 很难让标签具有结束符和背景图像，它们的宽度“扩展”以适应链接名称的长度。

代码：（这还不是全部，但足以显示背景图像的位置并显示子菜单）

.menu ul {
list-style: none;
position: relative;
float: right;
}

.menu ul li {
float: left;
background: url(../wp-content/uploads/2012/08/inactive_right.png) no-repeat right;
padding: 11px 54px 12px 0;
}

.menu ul li:hover > ul {
display: block;
}

.menu ul li a:hover {
color: red;
}

.menu ul ul {
display: none;
position: absolute;
z-index:999; 
background-color: white;
white-space: nowrap;
}

.menu ul li:last-child ul {
right:0;
}

.menu ul ul li {
clear: both;
padding: 5px;
}

.menu ul ul li a:hover {
color: blue;
}

问题的图片 - 看看子菜单中的收尾情况如何？我已经尝试了所有方法，但不确定为什么它与 Ul li 相关联时会显示在那里……而不是 ul ul li。

menu problem http://glassdoctordenvermetro.com/wp-content/themes/GDDenverTheme/images/menu_problem.jpg

Answer 1

您正在为 .menu (.menu ul li) 中的所有列表项设置背景。由于您的子菜单使用列表项并且位于 .menu 内，因此也应用了该样式。使用直接子选择器仅捕获第一级。

.menu > ul > li {
    ...
}