Achieve this navigation menu layout - html

Question

I need to achieve this layout, please note on the current item,
The 3 sublists are supoused to be children of the current item,
The problem here is that if I set the position absolute and left:0 and width:100%; the max width would be determined for the parent's width,
So,
How can I keep the lists children and make them use the whole avaliable space?
this is my markup for now: (can i keep it?)
<nav>
<ul class="main">
<li><?=lang('grupo-cabau')?></li>
<li class="active">
<?=lang('nuestros-hoteles')?>
<ul>
<li>
<ul>
<li>list
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
<ul>
<li>listt <ul>
<li>item</li>
</ul>
</li>
</ul>
<ul>
<li>list
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><item</li>
<li>item</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 I set li.active to position:relative (very far from there):
So question is,
How can the position:absolute child be bigger (and left,right properties respond to the layout) with the parent being position:relative???
Is my only chance to take the list out of the tree?

Answer 1

What you are trying to do is set the width based on a parent's parent. That is the problem. But as you commented, the menu has a fixed width, which makes it easier.
I cleaned the HTML up to 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 this CSS:
body, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
list-style: none;
margin: 0;
padding: 0;
width: 500px; /* needs to be a 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 as .nav */
left: 0;
margin-top: 15px;
background: lightgreen;
}
.nav > li > ul > li {
display: table-cell;
width: 33%;
}
Check this demo: http://jsfiddle.net/LinkinTED/4a98c/
You'll probably want to show the submenu on a :hover effect, check http://jsfiddle.net/LinkinTED/4a98c/2/