css - Inherit width from indirect ancestor -

i have following html

<ul id="nav">   <li>     <a href="#">menu item 1</a>     <ul class="sub_menu">       <!-- full of <li> sub menu items -->     </ul>   </li>   <li>     <a href="#">menu item 2</a>     <ul class="sub_menu">       <!-- full of <li> sub menu items -->     </ul>   </li>   <li>     <a href="#">menu item 3</a>   </li> </ul> 

the #nav 100% width of browser window.

using css want float menu items side side inside container has similar css:

{ width: 1000px;  margin: 0 auto; } 

but want .sub_menus same width #nav.

how can done without changing html?

you can position: relative #nav, thing li , position: absolute; left: 0; right: 0 .sub_menu.

this way .sub_menu same width #nav regardless of width of li. you'll have add , adjust more styles make pretty , in position i'll leave you.

an additional requirement li stay position: static position of .sub_menu must relative #nav.

edit: @simon's answer pretty implementation of mine, op has left comment there indicating isn't adequate. we're still unsure of problem is.