Проблемы с выпадающим меню CSS в IE 7

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

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

Есть 2 проблемы:

  1. Самое важное. В IE7 есть проблемы с z-индексом для верхнего меню и содержимого заголовка. Заголовки находятся над раскрывающимся списком.
  2. Менее важно. В верхнем меню между первой ссылкой и раскрывающимся списком есть небольшой промежуток, из-за которого раскрывающийся список иногда исчезает при перемещении мыши к нему с верхней ссылки. Это происходит по крайней мере в Firefox 4 и IE 7. Эта проблема не возникает в нижнем меню.

Я удалил javascript, попытался удалить любой clearfix css, сократил css и html, переключился с html5 на xhtml1 strict, поиграл со свойствами position и z-index и прочитал несколько статей здесь и в других местах об ошибках z-index в IE, но я все еще могу не заставить это сдвинуться с места.

Меня не волнует поддержка IE6, или, если мне нужно использовать javascript, мне просто нужно, чтобы он работал в IE7 для клиента. Любая помощь приветствуется.


drop-down-menu css internet-explorer z-index internet-explorer-7
person Wesley Murch    schedule 05.05.2011    source источник
comment
Если это помогает, я решал эти типы проблем несколько раз: см., в в частности, эти ответы содержат пояснения (или ссылки на них): 1, 2, 3.   -  person thirtydot    schedule 06.05.2011
comment
Да, это помогает @thirtydot, я получил ужасное временное исправление javascript для некоторых других элементов в IE7, я обращусь к этим ответам. Я прочитал несколько эссе по z-index, но просто не мог заставить это работать, у меня обычно никогда не было проблем, но я признаю, что обычно просто бросаю случайные значения z-index, не зная, что я делаю. Спасибо.   -  person Wesley Murch    schedule 06.05.2011
comment
И для исчерпывающего и точного объяснения, которое помогло мне в первую очередь разобраться в этой проблеме: stackoverflow.com/questions/672228/ie-6-ie-7-z-index-problem/   -  person thirtydot    schedule 06.05.2011

Ответы (1)


arrow_upward
1
arrow_downward

В #header и #nav добавьте:

position:relative;

и

z-index:10 //for #nav
z-index:0  //for #header
person lord_t    schedule 05.05.2011
comment
Вот и все! Я действительно потратил на это все утро, а вы решили это за 5 минут! Я прочту z-index, когда закончу с этим проектом, это было для меня загадкой слишком долго. - person Wesley Murch; 05.05.2011
comment
Для второй проблемы я предлагаю переместить элементы .nav ›li› ul на 2 пикселя вверх с помощью css. Также некоторые проблемы могут возникнуть с обивкой верха в UL. - person lord_t; 05.05.2011
comment
Главное, что я не понял, это то, какие элементы нужно установить для z-index. У меня аналогичная проблема со второй навигацией и телом содержимого, но теперь я могу понять это сам (надеюсь). Вторая проблема может отойти на второй план, javascript решает ее на рабочем сайте. Но я попробую. - person Wesley Murch; 05.05.2011