Inherit width from indirect ancestor - css

Question

I have the following HTML
<ul id="nav">
<li>
Menu Item 1
<ul class="sub_menu">
<!-- full of <li> sub menu items -->
</ul>
</li>
<li>
Menu Item 2
<ul class="sub_menu">
<!-- full of <li> sub menu items -->
</ul>
</li>
<li>
Menu Item 3
</li>
</ul>
The #nav is 100% the width of the browser window.
Using only CSS I want to float the Menu Items side by side inside a container that has similar CSS:
{ width: 1000px; margin: 0 auto; }
But I want the .sub_menus to be the same width as #nav.
How can this be done without changing the HTML?

Answer 1

You can position: relative the #nav, do your thing with the li and then position: absolute; left: 0; right: 0 the .sub_menu.
This way .sub_menu is the same width as #nav regardless of the width of li. You'll have to add and adjust some more styles to make it look pretty and in position but I'll leave that to you.
An additional requirement is that li will stay position: static as the position of .sub_menu must be relative to #nav.
EDIT: #simon's answer is pretty much an implementation of mine, but OP has left a comment there indicating that it isn't adequate. We're still unsure of what the problem is.

Answer 2

Try the following (jsbin):
* { margin: 0; padding: 0 }
#nav, .sub_menu {
width: 100%;
height: 30px;
position: relative;
background: green;
}
#nav > li > a {
z-index: 1;
position: relative;
}
#nav > li {
float: left;
list-style-type: none;
}
.sub_menu {
position: absolute;
left: 0;
background: red;
top: 30px
}
This puts all the buttons one after another and keeps the submenu 100% width

Answer 3

here you go:
http://codepen.io/anon/pen/YXZQMo
The Subnav UL has now the same width as the parent li
#nav { width: 1000px; margin: 0 auto; }
ul{
margin:0;
padding:0;
list-style:none;
}
ul li{
display:block;
float:left;
padding: 5px 10px;
width:auto;
}
ul li:hover ul{
display:block;
}
ul li ul{
display:none;
width:100%;
background-color:red;
min-height:20px;
transition:all 0.3s;
}
ul li ul li{
display:block;
float:none;
}