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

时间:2013-12-29 04:54:30

标签: html css navigation

我正在创建一个导航菜单,其背景为窗口的整个宽度。为此,我将ul元素放在div设置overflow: hidden;的内容中。但是,由于这个原因,当子菜单悬停时,它们会推动顶级li元素。第三级菜单还使第二级li元素在高度上扩展以包含它们。我还在ul ul元素上设置负边距以重新对齐它们。 ul ul position:absolute使用ul ul时,它们会正常显示,但不会显示在包含div之后,因此我将position:relative设置为li。这些只是我所知道的问题。我将如何完成具有全宽背景的导航菜单?当有多行<div id="navigation"><div class="maxwidth"> <ul> <li><a href="#">Main</a></li> ... </ul> </div></div> 元素时,我还想确保它有用。感谢。

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

HTML

#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; }

CSS

{{1}}

1 个答案:

答案 0 :(得分:0)

经过一段时间摆弄并改写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; }