z-index не работает с выпадающим меню css3

Question

Я изменяю навигацию css3, которую я нашел в руководстве, и у меня возникают проблемы с z-индексацией.

Пожалуйста, проверьте навигацию здесь:

http://cafemeetup.com/testArea/nav/

Если вы перевернете любой из двух элементов навигации, вы увидите, что z-индексирование выпадающего списка выше, чем ссылка, которая его породила. Это неверно, так как я сделал z-индекс для ролловера ниже в порядке наложения.

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

Это делается здесь, в Shopify:

http://www.shopify.com/ (ролловер 'ресурсы')

В любом случае, надеюсь, кто-то может пролить свет на это. Я предполагаю, что проблема заключается в том факте, что объект, к которому я пытаюсь добавить z-индексы, является указателем мыши, а также то, что они не являются обычными элементами div как таковыми.

В любом случае, спасибо, что хотя бы прочитали все это. Я ценю ваше время, Джеймс

Answer 1

Я сделал для вас демо на jsFiddle.Попробуйте переместить фон и стиль z-index в ссылку .drop вместо элемента списка в вашем коде, и он должен работать.

http://jsfiddle.net/sTsrb/

Answer 2

Вы применяете z-index:999 к <li class="menu_right">, а затем применяете z-index:1 к дочернему элементу <div class="dropdown_1column align_right">.Если вы хотите, чтобы он отображался под <li>, сделайте его родным братом, а не ребенком.