почему выпадающее меню CSS заставляет контент прыгать вниз? Что это исправляет?

Question

Я работаю над чистым выпадающим меню CSS. (IE6 сейчас не важен для меня.)

У меня есть все внутри "обертки" для центрирования.

На странице есть 4 делителя внутри "#wrapper", первый из которых - "#topbar", второй - "#nav", третий - поле "#content" и четвертый - "#footer". *

Дивы "#content" и "#footer" имеют абсолютное позиционирование, чтобы не дать им спрыгнуть вниз, когда открывается подменю. Это работает в IE8 и Chrome и FF, но IE8; режим совместимости показывает, что IE7 будет выводить div "#content" и "#footer" слева от центрированного столбца. Кроме того, абсолютное позиционирование используется для удержания нижнего колонтитула в нижней части страницы. удаление этого исправляет ошибку ie7, но заставляет все смещаться вниз, когда открыты подменю.

Есть ли способ исправить рендеринг левой границы IE7 в нижних делителях без абсолютного позиционирования? или с этим?

Я предпочитаю чистый CSS.

EDIT:

Верьте или нет, я использую кучу элементов span, а не ul или div. Должен ли я использовать структуру ul / li? Я считаю, что это дополнительный код.

Answer 1

Задумывались ли вы о том, чтобы оставить элементы div, расположенные relative, и разместить подменю absolute относительно его контейнера?

ul.menu li             { position:relative; overflow:auto; }    
ul.menu li ul.sub_menu { position:absolute; z-index:10; top:somePixelValueThatClearsTopListItem; }

Answer 2

Если IE6 не важен, рассматривали ли вы также игнорирование IE7?

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

<!--[if IE 7]>
<style type="text/css">
  .className {position: static;/*or relative*/}
</style>
<![endif]-->