我按照这个名为“重叠选项卡”的教程来构建 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 (.menu ul li) 中的所有列表项设置背景。由于您的子菜单使用的是列表项并且位于 .menu 中,因此也应用了该样式。使用直接子选择器仅捕获第一级。
.menu > ul > li {
...
}
关于css - WP CSS Overlapping menus 子菜单无法摆脱背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11947069/