css - WP CSS Overlapping menus 子菜单无法摆脱背景图片

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;
}

问题图片 - 查看子菜单中端盖的情况？我已经尝试了所有方法，但不确定为什么当它专门绑定(bind)到 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 {
    ...
}