html - Achieve this navigation menu layout -

i need achieve layout, please note on current item,

the 3 sublists supoused children of current item,

the problem here if set position absolute , left:0 , width:100%; max width determined parent's width,

so,

how can keep lists children , make them use whole avaliable space?

this markup now: (can keep it?)

<nav>     <ul class="main">         <li><a href="<?=base_url('grupo-cabau')?>"><?=lang('grupo-cabau')?></a></li>         <li class="active">             <a href="<?=base_url('nuestros-hoteles')?>"><?=lang('nuestros-hoteles')?></a>             <ul>                 <li>                     <ul>                         <li>list                             <ul>                                 <li><a href="<?=base_url('aquasol')?>">item</a></li>                                 <li><a href="<?=base_url('bahia')?>">item</a></li>                                 <li><a href="#">item</a></li>                             </ul>                         </li>                     </ul>                     <ul>                         <li>listt                               <ul>                                 <li><a href="#">item</a></li>                             </ul>                         </li>                     </ul>                     <ul>                         <li>list                             <ul>                                 <li><a href="#">item</a></li>                                 <li><a href="#">item</a></li>                                 <li><a href="#">item</a></li>                             </ul>                         </li>                     </ul>                 </li>             </ul>         </li>         <li><a href="<?=base_url('trabaja-con-nosotros')?>"><item</a></li>         <li><a href="<?=base_url('contacto')?>">item</a></li>     </ul>     <ul class="lang">         <li>esp             <ul>                 <li>eng</li>                 <li>deu</li>             </ul>     </ul> </nav> 

my current implementation (almost there):

header .wrapper > div nav ul.main > li.active > ul {     background: none repeat scroll 0 0 #ffffff;     display: block;     height: 141px;     left: 0;     position: absolute;     top: 60px;     width: 100%; } 

problem when set li.active position:relative (very far there):

so question is,

how can position:absolute child bigger (and left,right properties respond layout) parent being position:relative???

is chance take list out of tree?

what trying set width based on parent's parent. problem. commented, menu has fixed width, makes easier.

i cleaned html this:

<ul class="nav">     <li>item 1</li>     <li>item 2         <ul>             <li>list 2.1                 <ul>                     <li>item 2.1.1</li>                     <li>item 2.1.2</li>                     <li>item 2.1.3</li>                 </ul>             </li>             <li>list 2.2                 <ul>                     <li>item 2.2.1</li>                     <li>item 2.2.2</li>                     <li>item 2.2.3</li>                 </ul>             </li>             <li>list 2.3                 <ul>                     <li>item 2.3.1</li>                     <li>item 2.3.2</li>                     <li>item 2.3.3</li>                 </ul>             </li>         </ul>     </li>     <li>item 3</li>     <li>item 4</li> </ul> 

then made css:

body, ul, li {     margin: 0;     padding: 0;     list-style: none; } .nav {     list-style: none;     margin: 0;     padding: 0;     width: 500px; /* needs fixed width */     background: lightblue; } .nav > li {     display: inline-block;     background: lightblue;     margin-right: -4px;     padding: 15px; } .nav > li > ul {     position: absolute;     display: table;     width: 500px; /* same width .nav */     left: 0;     margin-top: 15px;     background: lightgreen; } .nav > li > ul > li {     display: table-cell;     width: 33%; } 

check demo: http://jsfiddle.net/linkinted/4a98c/

you'll want show submenu on :hover effect, check http://jsfiddle.net/linkinted/4a98c/2/