I am trying to create a navigation menu with a black background that spans the full width of the window. To achieve this, I have placed the ul element inside a div with overflow: hidden; set. However, I am facing issues where hovering over submenus causes them to push around the top level li elements and expand the second-level li elements in height due to third-level menus. I have applied a negative margin on the ul ul elements to align them properly. While using position:absolute for ul ul works fine but limits their display beyond the containing div, hence forcing me to use position:relative. These are some of the challenges I am encountering. Can you provide a solution for creating a navigation menu with a full-width background? Also, how can I ensure it works seamlessly even when multiple lines of li elements are present? Thank you.
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; }