带有子菜单的全宽导航菜单答案

【问题标题】：Full Width Navigation Menu with sub menus带有子菜单的全宽导航菜单
【发布时间】：2014-02-10 13:49:50
【问题描述】：

我正在创建一个导航菜单，它的黑色背景与窗口的整个宽度相同。为此，我将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; }

【问题讨论】：

这看起来怎么样？ jsfiddle.net/BVvc6/173
@BuddhistBeast 谢谢！这是一个进步。我已经修复了一些问题并记录了其他问题：jsfiddle.net/BVvc6/175
@michaellindal 我会做更多的工作并尽快回复你:)
我已经解决了你所有的问题：jsfiddle.net/BVvc6/180
如果上述方法对您有用，请告诉我，以便我将其放入答案中！

标签： html css navigation

【解决方案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; }

【讨论】：