为什么我的 UL sub-menu 以它的祖父母为背景？

Question

我正在制作一个菜单，在小屏幕上我使用渐变作为背景。此 sub-menu 有 4 个级别，每个级别都有自己的颜色背景。但出于某种原因，我的第 4 级 sub-menu 正在采用第 2 级 sub-menu 的背景颜色（它是 grandparent），而不是它应该的颜色，即纯白色。太奇怪了，这个问题跳过了第三个sub-menu。我已经尝试了尽可能多的 work-arounds，甚至将 !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，我删除了所有 large-screen CSS 来尝试 de-bug 它。第四级菜单有一个白色的背景。行。所以我把第一级 CSS 加回去了，第四级背景搞砸了。去掉了，把2级CSS加进去，4级背景又乱了。但是，如果我为大屏幕添加第 3 或第 4 级 CSS，则第 4 级背景根本不会受到影响。所以问题出在第 1 级和第 2 级 CSS 的某个地方。但我不明白为什么。我没有任何继承它的 parent 的 css，代码的 none 根本不需要任何渐变。太奇怪了。

Answer 1

花了几分钟查看您的代码，我想我找到了问题所在。在您的第二个和第三个子菜单中，您将背景应用于 span 标签。但是在您的第 4 个菜单 ( .slidemenu ) 上，您将它直接应用于 ul。

删除背景：

Line: 416
.slide-menu

将背景添加到：

Line: 432
.slide-menu li

工作fiddle：jsfiddle

为什么我的 UL sub-menu 以它的祖父母为背景？

Why is my UL sub-menu taking the background of it's grandparent?

html

css

navigation

background