CSS 不显示背景（溢出：自动没有帮助）

Question

#navigation_conatiner_7 的背景和边框不可见。我尝试将 overflow:auto 添加到其父级，它只显示滚动条。后来我尝试添加相同的内容，但后来它完全隐藏了。由于我的想法已经用完了，我想也许这里有人可能有答案。

这里是代码：http://jsfiddle.net/Tamaki/my5GV/

HTML：

<div id="navigation">
    <div id="holder">
        <div id="navigation_category_2">articles</div>
        <div id="navigation_category_3">columns</div>
        <div id="navigation_category_7">submit
            <div id="navigation_container_7">
                <div class="navigation_link"><span style="margin-left: 10px;">submit</span></div>
                <div class="navigation_link"><span style="margin-left: 10px;">applications</span></div>
                <div class="navigation_link"><span style="margin-left: 10px;">points</span></div>
            </div>
        </div>
    </div>
</div>

CSS：

#navigation {
    top: 0px !important;
    width: 100%;
    height: 60px;
    background-color: #eee;
    border-bottom: solid 3px #dd6a0c;
    position: fixed;
}

#holder {
    width: 960px;
    margin: 0 auto;
    height: inherit;
}

/* Navigation
============================*/

#navigation_category_2, #navigation_category_3, #navigation_category_7 {
    height: 60px;
    float: left;
    width: 120px;
    text-align: center;
    margin: 0 7px 0 8px;
    cursor: pointer;
    line-height: 60px;
    font-family: Impact, Arial, sans-serif;
    color: #111;
    font-size: 18px;
}

#navigation_category_2:hover, #navigation_category_3:hover, #navigation_category_7:hover {
    background-color: #dd6a0c;
    color: #eee;
}

#navigation_category_7:hover {
    background-color: #eee;
    color: #111;
}

#navigation_container_7 {
    top: 0;
    position: relative;
    display: none;
    width: 160px;
    left: -24px;
    border: 3px solid #dd6a0c;
    border-top: none;
    height: 0px;
    background-color: #eee;
}

#navigation_category_7:hover #navigation_container_7 {
    display: block;
}

.navigation_link {
    top: 0;
    width: inherit;
    height: 26px;
    text-align: left;
    font-size: 11px;
    font-family: Verdana;
    color: #111;
    line-height: 26px;
    text-transform: capitalize;
    font-weight: bold;
}

.navigation_link:hover {
    background-color: #dd6a0c;
    color: #eee;
}

Answer 1

从#navigation_conatiner_7 中删除height=0px

Answer 2

更改以下 id ：

 #navigation_category_7:hover {
        background-color: #dd6a0c;
        color: #111;
    }

Answer 3

代码的问题是您看到的颜色实际上是从粘贴在容器内的链接派生而来的。

添加了这个

#navigation_category_7 #navigation_container_7 .navigation_link {
background-color: #eee;
}

它现在可以工作了。检查http://jsfiddle.net/my5GV/2/

Answer 4

尝试更改css：

#navigation_category_2:hover, #navigation_category_3:hover, #navigation_category_7:hover {
    background-color: #dd6a0c;
    color: #eee;
}

#navigation_category_7:hover {
    background-color: #eee;
    color: #111;
}

到这里

#navigation_category_2:hover, #navigation_category_3:hover {//you were calling #navigation_category_7 here to
    background-color: #dd6a0c;
    color: #eee;
}

#navigation_category_7:hover {
    background-color: #eee; //this color is giving you the error, change if to 6 letter or rgba
    color: #111;
}

Answer 5

您不应该将 's 用于菜单。 尝试使用 ul 和 li 标签 像这样：

html:

<ul>
    <li><a href="LINK">MENU#1</a></li>
    <li><a href="LINK">MENU#2</a>
        <ul class="submenu-1">
            <li><a href="LINK">MENU#3</a>
                <ul class="submenu-2">
                    <li><a href="LINK">MENU#4</a></li>
                </ul>
            </li>
        </ul>
    </li>
        <li><a href="LINK">MENU#5</a>
        <ul class="submenu-1">
            <li><a href="LINK">MENU#6</a></li>
        </ul>
    </li>
</ul>

css:

ul li {
    // All menus li
}
ul li ul { // All submenus
    margin-top: 10px;
    margin-left: 10px;
}
ul li ul li { // All submenus li

}
ul.submenu-1 { // UL > LI > UL

}
ul.submenu-2 { // UL > LI > UL > LI > UL

}

Answer 6

改变

#navigation_category_2:hover,
#navigation_category_3:hover, 
#navigation_category_7:hover {
background-color: #dd6a0c;
color: #eee;
}

到

#navigation_category_2:hover,
#navigation_category_3:hover, 
#navigation_category_7:hover {
background-color: #dd6a0c !important;
color: #eee !important;
}

只需添加 !important 以防止覆盖。