IE7 z-index с неупорядоченным списком

Question

Следующий пример является очень упрощенной версией моей главной навигации.

http://jsfiddle.net/AEqxT/

Если вы посмотрите в большинстве браузеров, вы должны увидеть два зеленых списка рядом друг с другом, ссиняя коробка или «значок», сидящий сверху, соединяющий пропасть между ними.Однако в IE7 синий прямоугольник всегда опускается ниже второго уровня li.Я перепробовал все способы исправить это.Установка более высокого z-index для родительского ul ничего не изменила, и если я использую position: relative; для «значка», он теряет свою ширину и высоту.

Есть ли очевидное исправление для этого, чтоЯ скучаю?

Answer 1

Это сообщение об ошибке IE7 .

Вы можете исправить это с помощью решения JS, отправленного на этот вопрос , или вы можете вручную установить различные z-индексына все элементы <li>, упорядоченные от высоких до низких значений:

http://jsfiddle.net/AEqxT/3/

Answer 2

Вы, вероятно, будете бороться со своим значком в LI, вычеркните его из списка, и все должно быть в порядке, немного позабавившись с позицией:

http://jsfiddle.net/AEqxT/2/

Если вам абсолютно необходимо иметь это с LI, то вам, вероятно, понадобится JS, чтобы сделать эту работу