Раскрывающееся меню IE7 Make li Fill Оставшееся пространство

Question

Я создал раскрывающееся меню с использованием CSS и JavaScript, и у меня возникла проблема с правильным отображением подменю в IE7. При наведении курсора на тег привязки фон меняется на синий. Проблема в том, что в IE7 фон меняется только по длине текста, а не по ширине ul. Итак, если у вас есть один элемент с длинным именем, остальные отображаются неправильно, как показано на рисунке ниже.

Вы можете увидеть проблему на jsfiddle здесь . Просто убедитесь, что вы открываете его в IE7 или используете IE9 в режиме совместимости.

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

Спасибо

Answer 1

Хорошо, давайте посмотрим, что у вас есть:

<li><a href="#">Content</a></li>

, чтобы вы могли видеть, что проблема в том, что hover применяется к <a> и потому, что он недостаточно широк, он делаетне работает правильно.

Почему бы вам hover вместо <li> вместо этого?

перейти с

#mainmenu li a:hover { background: #008de2; }

на

#mainmenu li:hover { background: #008de2; }

PS Я использую IE9, поэтому не могу проверить его должным образом: - /

Answer 2

Вы можете найти свое решение здесь (jsfiddle) .

Я внес несколько изменений в #mainmenu li ul li, а также добавил #mainmenu li ul li:hover { background: #008de2;}. На моем IE7, IE9 (у меня нет IE8 для тестирования), Safari, Firefox, Opera и Chrome :)

Answer 3

Попробуйте установить display:block для этих тегов привязки.