CSS3 - элемент меню за родителем?

Question

Как и в заголовке.

У меня есть трехуровневое меню, и я хочу, чтобы оно выглядело следующим образом:

[ FIRST LEVEL ITEM ]
--------------------
[ SECOND LEVEL ITEM ]
[ SECOND LEVEL ITEM ]
[ THIRD LEVEL ITEM ]
[ SECOND LEVEL ITEM ]
[ THIRD LEVEL ITEM ]
[ SECOND LEVEL ITEM ]

Но элементы третьего уровня отображаются сразу за другими элементами.

Я добавил к ним огромную красную рамку размером 50px, чтобы вы могли увидеть, в чем смысл:

http://jsfiddle.net/TQH9v/

Я немного сонный и усталый, и мне нужно закончитьэтот код сегодня, так что извините за столько глупых вопросов.По крайней мере, легкие очки репутации: P

Спасибо:)

Answer 1

В вашем CSS много лишних вещей, поэтому я не буду редактировать его точно.

Что вам нужно узнать, так это замечательная модель z-index. Вы никогда не упоминали, хотите ли вы, чтобы это работало в IE, поэтому я просто объясню это для реальных браузеров.

Сначала добавьте position: relative; для всех элементов LI. Что-то вроде

#page-navigation li { position: relative; }

будет работать.

Теперь добавьте z-index к каждому элементу UL, который содержит «всплывающее» меню, и установите для него z-index, который выше, чем родительский LI. Если вы не установите z-index, по умолчанию он будет равен 0.

https://developer.mozilla.org/en/understanding_css_z-index

Если вы хотите, чтобы это работало в IE, вы должны установить для родительского LI более высокий z-индекс, чем у содержащегося в нем всплывающего UL. Это просто, как глупо работает IE. http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/