Wide Width Dropdown Menu

Question

I am trying to create a simple and simple CSS drop-down menu that opens in full-width mode under each element, but also saves each drop-down menu underneath the parent element. This image better explains what I'm trying to achieve:

I just can't figure out how to keep the nested UL inside each li, and also completely cover the whole background.

Here is the demo I prepared on Codepan : http://cdpn.io/wLjFm

Answer 1

/* not very relevant styling */ h1 { font-size: 20px; padding-top: 20px; } .container { position: relative; margin: 20px auto 0 auto; width: 75%; } .header { background: #eee; } .nav { background: #ccc; } /* relevant styling */ body { overflow-x: hidden; } /* trick from css-tricks comments */ /* FIRST LEVEL */ .nav > ul > li { display: inline-block; position: relative; padding: 3px 10px 3px 0; z-index: 100; } /* SECOND LEVEL */ .nav > ul > li > ul { position: absolute; left: 0; top: 100%; padding: 0 1000em; /* trick from css-tricks comments */ margin: 0 -1000em; /* trick from css-tricks comments */ z-index: 101; visibility: hidden; opacity: 0; background: rgba(255, 240, 240, 0.8); } .nav > ul > li:hover > ul { visibility: visible; opacity: 1; } .nav > ul > li > ul > li { padding: 3px 0; } .nav > ul > li:hover .drop { font-weight: bold; } 

 <div class="header"> <div class="container"> <h1>Hank Big Leauge Widgets</h1> <span>You want a widget? we got 'em!</span> </div> <!-- NAVIGATION --> <div class="nav"> <ul class="container"> <li> <a class="drop" href="#">Products</a> <ul> <li><a href="#">Widget A</a></li> <li><a href="#">Widget B</a></li> <li><a href="#">Widget C</a></li> </ul> </li> <li> <a class="drop" href="#">Locations</a> <ul> <li><a href="#">Location A</a></li> <li><a href="#">Location B</a></li> <li><a href="#">Location C</a></li> </ul> </li> <li> <a class="drop" href="#">Staff</a> <ul> <li><a href="#">President</a></li> <li><a href="#">VP</a></li> <li><a href="#">Manager</a></li> </ul> </li> </ul> </div> </div> <div class="content container"> <p>All sorts of content</p> <p>All sorts of content</p> <p>All sorts of content</p> <p>All sorts of content</p> <p>All sorts of content</p> <p>All sorts of content</p> </div> **CSS and HTML** 

Demo

JSFIDDLE