Позиционирование меню CSS в Internet Explorer 7

Я создал меню в HTML и CSS, которое работает во всех основных браузерах (Chrome, Firefox, IE8 + и Safari). Вы можете найти его здесь: http://www.calvaryccm.com/MenuTest.aspx

Проблема возникает в IE 7.

У меня есть всплывающее меню с использованием JS для эффекта. Когда я пытаюсь отобразить его в IE7, происходит следующее:

Ошибка меню IE 7

Мне нужна помощь, чтобы понять, как расположить меню под текстом. Спасибо за помощь!


css internet-explorer rendering internet-explorer-7
person Courtney Stephenson    schedule 16.09.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я не уверен, хотите ли вы использовать .block или .nav в селекторах ниже. Я выбрал .block, потому что вижу, как он применяется к элементу.

  • На .block ul удалите overflow: hidden.
  • На .block li добавьте position: relative.
  • На .block ul.nav ul добавьте left: 0.

Теперь у вас есть печально известная проблема IE6 / 7 z-index:

  • Чтобы исправить это в этом случае, на .block ul добавьте position: relative; z-index: 3.
  • z-index: 3 быть на единицу выше, чем z-index на #player-area.
person thirtydot    schedule 16.09.2011

arrow_upward
1
arrow_downward

Кроме того, вам не нужно использовать javascript для добавления класса hover, как вы это сделали. Просто используйте псевдоселектор :hover в CSS:

ul.nav > li:hover
person Jonathan Wilson    schedule 16.09.2011