我正在处理一个菜单，在小屏幕上我使用渐变作为背景。此子菜单有 4 个级别，每个级别都有自己的颜色背景。但由于某种原因，我的第 4 级子菜单采用了第 2 级子菜单(它的祖 parent )的背景颜色，而不是它应该的颜色，即纯白色。太奇怪了，这个问题跳过了第三个子菜单。我已经尝试了尽可能多的解决方法，甚至将 !important 添加到第 4 级 css 也没有修复它。下面是 jsFiddle 和代码。我错过了什么吗？
这是 jsFiddle
CSS(适用于小屏幕)
#navbar {
background-color: #29568F !important;
}
.nav-tabs {
display: inline-block;
position: relative;
width: 98.5%;
background-color: #29568F;
margin: 0px 0px;
padding: 0px;
list-style-type: none;
color: white;
text-decoration: none;
text-shadow: 2px 2px #000000;
font: 18px arial, verdana, sans-serif;
border: 3px solid #29568F;
}
#menu-icon {
width: 200px;
display: block;
float: left;
text-align: left;
border: 0px;
border-bottom: 0px !important;
}
.nav-tabs > li:first-child span { /* This is #menu-icon */
border: 0px !important;
background: #29568F !important;
}
.menu-item {
display: none;
}
.nav-tabs li {
width: 100%;;
border-right: 0px;
clear: both;
list-style-type: none;
}
.nav-tabs li span {
display: block;
border: 0px !important;
padding: 10px 2.5% !important;
width: 95% !important;
position: relative !important;
top: 0px;
left: 0px;
}
.nav-tabs li span {
text-align: left;
border-bottom: 1px solid lightgrey !important;
background: linear-gradient(#29568F, #3399CC);
}
.nav-tabs > li > span:hover,
.nav-tabs > li .open {
background: linear-gradient(#3399CC, #29568F);
}
/* -- Arrows -- */
.nav-tabs .arrow-open {
content: url("/images/arrow-up.png");
}
.nav-tabs li .arrow-closed{
content: url("/images/arrow-down.png") !important;
}
/* --- 2nd level submenu -- */
.sub-menu {
position: relative;
top: 0px;
left: 0px;
width: 100%;
clear: both;
}
.sub-menu > li {
position: relative;
left: 0px;
}
.sub-menu > li span {
left: 0px;
text-align: center;
background: linear-gradient(#99EEFF, #3399CC);
}
.sub-menu > li > span:hover,
.sub-menu > li .open {
background: linear-gradient(#3399CC, #99EEFF);
}
/* -- 3rd level submenu -- */
.drop-menu {
display: none;
clear: both;
width: 100%;
position: relative;
top: 0px;
left: 0px;
}
.drop-menu li span {
border: 0px;
}
.drop-menu > li > span {
border: 0px !important;
left: 0px;
text-align: left;
background: linear-gradient(#C9EAF3, #ffffff);
}
.drop-menu > li > span:hover,
.drop-menu > li .open {
background: linear-gradient(#ffffff, #c9EAF3);
}
/* -- 4th level submenu -- */
.slide-menu {
display: none;
background: #ffffff !important;
border: 0px;
width: 100%;
clear: both;
position: relative;
top: 0px;
left: 0px;
z-index: 300px;
}
.slide-menu li {
position: relative;
left: 0px !important;
width: 98%;
border: 0px !important;
text-align: center;
}
.slide-menu li span {
display: block !important;
position: relative;
left: 0px;
width: 100%;
border: 0px !important;
}
HTML(查看结构的示例代码)
<div id="navbar">
<ul class="nav-tabs">
<li id="menu-icon"><span><img src="/images/menu-icon.png">Menu</span></li>
<li class="menu-item"><span>Dogs <div class="arrow-closed"></div></span>
<ul class="sub-menu">
<li><span>Meet the Breeds<div class="arrow-closed"></div></span>
<ul class="drop-menu">
<li><span>Sort A - Z <div class="arrow-closed"></div></span>
<ul class="slide-menu">
<li>Breeds A - F</li>
<li>Breeds G - L</li>
<li>Breeds M - R</li>
<li>Breeds S - Z</li>
</ul> <!-- close slide-menu -->
</li> <!-- close Drop-menu item -->
</ul> <!-- close drop-menu -->
</li> <!-- close sub-menu item -->
</ul> <!-- close sub-menu -->
</li> <!-- close main menu item -->
</ul> <!-- close main-menu -->
</div>
注意!
在为这个问题创建 jsFiddle 时，我意识到当我只包含小屏幕的 css 时，第 4 级菜单的背景应该是白色的。直到我包含了整个 CSS 代码，它才停止工作。这仍然没有意义，因为第 4 级背景在正常的大屏幕状态下工作。我不明白为什么要这样做，所以如果有人愿意为我梳理这个问题，我将非常感激。
更新!
我一直在搞乱 jsFiddle，我删除了所有大屏幕 CSS 以尝试调试它。第四级菜单有一个白色的背景。好的。所以我重新添加了第一级 CSS，第四级背景搞砸了。删除它，并添加了第 2 级 CSS，第 4 级背景再次搞砸了。但是，如果我为大屏幕添加第 3 级或第 4 级 CSS，则第 4 级背景根本不会受到影响。所以问题出在第一级和第二级 CSS 的某个地方。但我不明白为什么。我没有任何东西继承它是父级的 css，而且所有代码都不需要任何渐变。太奇怪了。
最佳答案
花了几分钟查看您的代码，我想我找到了问题所在。在您的第二个和第三个子菜单中，您将背景应用于 span 标签。但是在您的第 4 个菜单 (.slidemenu) 上，您将它直接应用于 ul。
删除背景:
Line: 416
.slide-menu
添加背景:
Line: 432
.slide-menu li
工作 fiddle :jsfiddle
关于html - 为什么我的 UL 子菜单采用其祖 parent 的背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30466044/