Как грамотно организовать навигацию

[Syndrome]

Здравствуйте! Помогите пожалуйста сделать такую навигацию. Имеется основной список ul 1, расположенный горизонтально. В него (в одну из ссылок) вложен второй список ul 2, тоже горизонтальный и начинается как и родительский список. В списке ul 2 в ссылку вложен третий список ul 3, отображаемый вертикально, но уже параллельно ссылке, в которую вложен.

Ах да, все в статике, т.е. ничего никуда не пропадает.

Заранее спасибо!

<ul id="navi">

<li><a href="index.html">ГЛАВНАЯ</a></li>

<li class="re"><a href="produkt.html">ПРОДУКЦИЯ</a>

<ul id="navi2">

<li><a href="#">Цифровые ЖКИ</a>

<ul id="navi3">

<li><a href="#">общего применения</a></li>

<li><a href="#">специального применения</a></li>

<li><a href="#">с пиктограммами</a></li>

</ul>

</li>

<li><a href="#">Алфавитно-цифровые ЖКИ</a></li>

<li><a href="#">Графические индикаторы</a></li>

<li><a href="#">Индикаторные ЖК-модули</a></li>

</ul>

</li>

<li><a href="dopolnitelno.html">ДОПОЛНИТЕЛЬНО</a></li>

<li><a href="contacts.html">КОНТАКТЫ</a></li>

</ul>

#navi li {

list-style: none;

display: inline;

position: relative;

margin-right: 30px;

}

#navi #navi2 {

list-style: none;

display: inline;

position: absolute;

top: 30px;

width: 780px;

left: -150px;

}

#navi #navi2 #navi3 {

display: block;

width: 300px;

position: absolute;

top: 25px;

}

#navi #navi2 li {

list-style: none;

margin-right: 15px;

}

Edited December 22, 2010 by Syndrome