html - このナビゲーション メニュー レイアウトを実現する

Question

このレイアウトを実現する必要があります。現在のアイテムに注意してください。

3 つのサブリストは、現在のアイテムの子であると想定されています。

ここでの問題は、位置を絶対に設定し、左: 0 および幅: 100%; に設定した場合です。最大幅は親の幅に対して決定されます。

そう、

リストの子を保持し、使用可能なスペース全体を使用するにはどうすればよいですか?

これが今のところの私のマークアップです: (そのままにしておいていいですか?)

<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>

私の現在の実装（ほとんどあります）：

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%;
}

li.active を position:relative に設定したときの問題 (そこから非常に遠い):

質問は、

親が position:relative である場合、どのように position:absolute 子を大きくすることができますか (そして、左、右のプロパティがレイアウトに応答しますか?)

ツリーからリストを取り出す唯一のチャンスはありますか?