带子菜单的全宽导航菜单

Question

我正在创建一个导航菜单，该菜单在窗口的整个宽度上具有黑色背景。为此，我将ul元素放在已设置overflow: hidden; div中。但是，正因为如此，当子菜单悬停时，它们会在顶级元素周围推动li。第三级菜单还导致第二级li元素的高度扩展以包含它们。我还在ul ul元素上设置负边距以重新对齐它们。使用 position:absolute ul ul时，它们正常显示但不出现在包含的div 之后，所以我ul ul设置为 position:relative .这些只是我所知道的问题。我将如何完成具有全宽背景的导航菜单？我还想确保当有多行li元素时这有效。谢谢。

JSFiddle： http://jsfiddle.net/BVvc6/170/

.HTML

<div id="navigation"><div class="maxwidth">
<ul>
    <li><a href="#">Main</a></li>
    ...
</ul>
</div></div>

.CSS

#header {height:70px; background:lightblue;}
.maxwidth { max-width: 1280px; width:90%; margin: 0 auto; }
#navigation {
    background:rgb(42,42,42);
    box-shadow: inset 0px 10px 30px -10px black; 
    width: 100%;
    /* requires content to stay in div for full width background */
    overflow:hidden;
}
#navigation ul {
    margin:0; padding:0; 
    position: relative; 
}
#navigation a /* Apply to all links inside the multi-level menu */
{
    color: #FFF; text-decoration: none; padding: 0 0 0 0px;
    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}
#navigation li {
    position: relative;
    float: left;
    padding: 0px 20px 0px 20px;
}
#navigation ul > li:hover { background: gray; }
#navigation ul ul {
    position: relative;
    width: 180px;
    margin: 0px -20px;
    display: none;
}
#navigation ul ul li { display: block; width: 180px; right: -180px; background: rgb(42,42,42); }
#navigation li:hover > ul {
    display: inline;
}
#navigation ul ul ul {position: relative; left: 158px; }

Answer 1

经过一段时间的摆弄和重写 css，我已经设法完成了我想做的事情。该问题已在 jsfiddle 上更新。

JSFIDDLE： http://jsfiddle.net/BVvc6/194/

.CSS：

#navigation, #footer, #header {padding:0px 0px;text-shadows: 1px 1px 3px #000;}
#navigation {
    background:#2A2A2A;
    box-shadow: inset 0px 0px 30px 0px black;
}
#navigation ul ul {
    background:#2A2A2A;
    border: black 1px solid;
}
#navigation ul ul li { border-bottom: black 1px solid; }
#navigation ul ul li:last-child { border-bottom: none; }

#navigation a
/* Apply to all links inside the multi-level menu */
 {
    color: #FFF;
    text-decoration: none;
    /* Make the link cover the entire list item-container */
    display:block;
    padding: .6em;
}
#navigation ul {list-style: none; overflow:hidden; padding:0; margin:0;}
#navigation > .maxwidth > ul > li { float: left; padding: 0 .6em; }
#navigation > .maxwidth > ul > li > ul { margin-left: -.6em; } 
#navigation ul li:hover, #navigation ul li.hover { background: black; }
#navigation ul ul {display:none; position: absolute; overflow:visible;}
#navigation ul li {height: /*38px;*/ }
#navigation ul li:hover > ul, #navigation ul li.hover > ul { display: block; background: #2A2A2A;}
#navigation ul ul li { display: block; overflow:hidden; width: 12em; }
#navigation ul ul ul { left: 12em; margin-top:-2.4em; }