Многоуровневый раскрывающийся список

[Psyh]

В общем учусь. Нашел на фрилансе, в заказе на верстку PSDшники. Скачал потренироваться.

Главную страницу как бы сверстал, не считая меню. Сейчас с ним и разбираюсь. Верхнее горизонтальное меню с выпадающими списками сделал, в общем без особых проблем.

А вот левое меню трехуровневое, причем последний уровень позиционирован отдельно (за пределами первых двух уровней).

http://s41.radikal.ru/i093/0909/79/be266845ed42.jpg

Я сделал меню, грубо говоря, такого вида:

<ul>

<li>

<ul>

<li>

<ul><li></li></ul>

</li>

</ul>

</li>

</ul>

И сегодня весь день пытался средствами css вытащить последний вложенный список, и поставить в нужное место на странице...

Не получается... Вернее получается если задать ему "дисплей: абсолют". Но при абсолютном позиционировании привязка идет от краев экрана, поэтому при изменении масштаба, или разрешения, такой объект съезжает со своего места, т.к. оказывается в тех же координатах на экране, но не на странице.

Подумал еще, попробовал вообще вытащить этот последний уровень, и поставил его на странице отдельно, там где он меньше всего может влиять на соседние слои и задал ему высоту, маргины и паддинги=ноль, display: relative, а содержимое уже позиционирую в нужное место. Пока не выставил как нужно, но думаю это возможно. Но на мой взгляд сам подход порочен. Мне интересно мнение опытных людей.

Про скрипт тут пока не говорю, потому как это не принципиально. Скрипт только скрывает и показывает вложенные уровни (ну или слои и т.п.)

Вот еще кусок кода:

<div id="sub_menu_3-1">		<!-- Собственно Третий уровень -->
							<ul>
								<li><a href="#">3d визуализация</a></li>
								<li><a href="#">электроснабжение</a></li>
								<li><a href="#">архитектурное<br/>освещение</a></li>
								<li><a href="#">интерьерное<br />освещение</a></li>
								<li><a href="#">комплектация мебели</a></li>
								<li><a href="#">комплектация <br />сан.техники</a></li>
								<li><a href="#">комплектация<br />напольных<br />и настенных покрытий</a></li>
								<li><a href="#">камень</a></li>
								<li><a href="#">лестницы</a></li>
							</ul>
				</div>

		<div class="left">
			<ul>
				<li><a href="#">услуги</a>
					<ul>
						<li><a href="#">консалтинг</a></li>
<!--сюда вложен 3-й уровень--> <li><a href="#" onclick="openMenu('sub_menu_3-1');return(false)">проектирование</a>
						</li>
						<li><a href="#">генеральный подряд</a></li>
						<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>
				<li><a href="#">тендеры</a></li>
			</ul>

		</div>

[VJiK]

Если id="sub_menu_3-1" вставлен в месте этого комментария: <!--сюда вложен 3-й уровень-->, то задайте для <div class="left"> position: relative; и ваш блок будет позиционироваться не от края экрана а относительно блока left

[mishka]

При абсолюте привязка идет к ближайшему родителю с релейтивом, если такого нет то к окну браузера

[Psyh]

Спасибо огромное, прояснили вопрос с позиционированием, этой детали мне не хватвло.

Думаю должно получиться по первому варианту. Проверю, отпишусь

[Psyh]

Еще раз спасибо. Удалось разместить как требуется.

С интерлиньяжем в списке последнего уровня еще надо поколдовать, но это уже из другой песни. И скрипт нужен какой-то другой или доработать существующий.