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）中的所有列表项设置背景。由于您的子菜单使用list-items并且在.menu中，因此也应用了样式。使用直接子选择器仅捕获第一级。

.menu > ul > li {
    ...
}

WP CSS Overlapping菜单子菜单无法摆脱背景图像

1 个答案: