Меню в несколько строк: проблемы с прозрачностью

[Vanoid]

Стандартное меню в одну строчку работает отлично. У меня категорий много, поэтому пришлось сделать меню аж в три строки. Подправил немного stylesheet.css (в т.ч. height: 90px; и padding подуменьшил).

Выглядит хорошо, но вот незадача: при наведении на пункт меню (топовая категория), если оно не в нижней строке, то категории, которые находятся в строках ниже "просвечивают" через список подменю. Более того- выбрать пункт в подменю не получается, т.к. при перемещении мыши выбирается другой пункт из топовых категорий (а не подкатегорий).

В .css не силён (никак), но, подозреваю, что лечится это не сложно. Подскажите- как?

Скриншот:

Один из вариантов, например, сделать, чтобы второй уровень меню выводился всегда ниже основного меню. Аналогично, как если бы выбирали из нижней строки основного меню.

Змінено 21 листопада 2012 користувачем Vanoid

[12strun]

В CSS значение z-index сделайте побольше к элементу, который надо вывести наверх.

[Vanoid]

Попробовал сейчас поменять z-order, которые там указаны на самый большой, который нашёл в css (99). Не помогло. Потом поставлял z-order: 99; по очереди в каждую секцию #menu. Тоже эффекта не возымело. Хотя если поменять цвет или шрифт в этих секциях- эффект есть. Подозреваю, что само поле (фон) меню задаётся одной и той же секцией и имеет одинаковый z-order.

[12strun]

http://htmlbook.ru/css/z-index

[Vanoid]

Ура! Спасибо! Оказывается z-index не работает, если не задан position. В итоге я просто добавил пару строк

position: relative;
z-index: 99; (вообще-то можно и поменьше)

в секцию #menu > ul > li:hover и всё заработало! Спасибо 12strun за наводку на хороший хелп по z-index