html - 带子菜单的全宽导航菜单

Question

我正在创建一个导航菜单，该菜单的整个宽度都是黑色背景。为此，我将 ul 元素放在 div 中，该元素设置了 overflow: hidden;。然而，正因为如此，当子菜单悬停时，它们会插入顶级 li 元素。第三级菜单也导致第二级 li 元素扩展高度以包含它们。我还在 ul ul 元素上设置负边距以重新对齐它们。使用 ul ul 使用 position:absolute 它们正常显示但不会出现在包含 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; }