Облако тегов с выпадающим меню

[okey]

Подскажите, можно ли это сверстать? Если можно, дайте на водку
[attachment=8467:menu.jpg]
Поясню: ряд ссылок представлен в виде облака тегов. Почти у каждого пункта есть подменю, раскрывающееся по наведению курсора.
Я решил сверстать само облако с помощью списка, у элементов которого "float: left". Но это не принципиально.

****<li class="size5">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size3">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size1">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size2">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size5">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size2">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size4">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size5">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size4">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size2">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size2">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size2">[Только зарегистрированные пользователи могут видеть ссылки. ]

[Aykroyd]

Подскажите, можно ли это сверстать?

Можно.

Если можно, дайте на водку

Оформляйте все подменю как и положено (с помощью вложенных списков). Затем абсолютно позиционируйте эти вложенные списки относительно родительских пунктов. Вот и вся наводка.

[okey]

Благодарю за наводку.
В IE 7.0 возник глюк из-за z-index. Если коротко, то объект с абсолютным позиционированием (position: absolute) внутри объекта с относительным позиционированием (position: relative) перекрывается другими объектами с относительным позиционированием (другими пунктами меню). И z-index не помогает.

[attachment=8468:menu2.jpg]

Полазив по инету и весьма подумав, решил с помощью яваскриптов динамически уменьшать z-index у неактивных пунктов меню и увеличивать у активного.
Вот так скрипт выглядит с использованием библиотеки jquery:

$(document).ready(function(){
****$("#menu ul li").mouseover(function(){
********$(this).addClass("over");
********
********// z-index for IE:
********$("#menu ul li").css("z-index", 400);
********$(this).css("z-index", 500);
****});
****$("#menu ul li").mouseout(function(){
********$(this).removeClass("over");
****});
});

Благодаря этому, меню вывелось поверх прочих элементов... но ишак униматься не хотел ) При движении курсора мышки по выпавшему меню начинается мерцание, явно указывающее на то, что z-index всё ещё глючит. Посмотреть можно [Только зарегистрированные пользователи могут видеть ссылки. ]. Ликвидировать мерцание не удалось. Выручайте.

[Aykroyd]

но ишак униматься не хотел )

На то он и ишак)

Mouseenter и mouseleave Вам в помощь (вместо mouseover и mouseout).

P.S.

Для нормальных браузеров, когда не требуется какая-нибудь анимация (например, плавное изменение прозрачности при отображении подменю или какое-нибудь его «выезжание/заезжание»), можно вполне обойтись без использования jQuery. Т.е. подобные задачи решаются исключительно с помощью CSS. Например:

ul li ul {display: none;}
ul li:hover ul {display: block;}

[okey]

Супер! Работает. Не думал, что IE поймёт. Спасибо вам.
Для ишака пришлось добавить в стили увеличение z-index:

ul li:hover {
****z-index: 400;
}

Не понадобились даже mouseenter и mouseleave.

[Aykroyd]

Аминь.