Раскрывающееся меню скрывается за другими элементами в IE

Question

Я установил тему Boldy с site5 на один из моих проектов и столкнулся с одной серьезной проблемой.

При просмотре в Internet Explorer (8 или ниже) отображается верхнее выпадающее менюза некоторыми другими элементами (ползунок основного содержимого, H1 и т.Демонстрационная страница сайта Boldy http://wordpress.site5.net/boldy/ и парящая над вкладкой блога верхнего меню в IE.

Я попросил site5 разобраться в ней, они знают о проблеме, но не смогли найти решения.

Answer 1

Ok оригинальное решение здесь - Швейцарский кредитный сайт . Это работает, но использует сложное решение z-index. Вот очень простое и улучшенное решение - Галерея изображений Jeyjoo Это работает в IE6 +, Firefox, Opera, Safari и Chrome

Решение

HTML

<div id="container_page" class="container_page">
  <div id="container_header" class="container_header">
    NAV BAR GOES HERE
  </div>
  <div id="container_body" class="container_body">
    ...body text...
  </div>
</div>

CSS

#container_page #container_header {position:relative;z-index:2;}
#container_page #container_body {position:relative;}

почему это работает

Вы должны сообщить IE, как эти два div связаны друг с другом.

Answer 2

(не мой сценарий) Я уверен, что я мог найти ответ на этот вопрос здесь, но я не могу его найти.В любом случае, это отлично сработало для меня ...

$(function() {
var zIndexNumber = 1000;
$('ul').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});

просто убедитесь, что ваш CSS включает position и z-index, чтобы скрипт мог получить доступ к значениям.придумал это - избавил меня от многих неприятностей.

Answer 3

Если я не ошибаюсь, IE неправильно наследует z-index из top-nav для дочерних элементов li в меню. Вот почему фотографии с z-индексом 60 скрывают это. Вы можете сделать две вещи здесь.

1. Устранить z-индекс фотографии.
2. Непосредственно указывайте z-индекс 100 для подсписка, а не только для списка верхней навигации.

Answer 4

Я вижу, вы до сих пор не решили эту проблему.Я нашел решение здесь в подменю - Chkredit - швейцарский кредитный сайт Работает во всех версиях IE и является легким и 100% CSS (без JavaScript).

В основном проблема заключалась в том, что IEнеправильно использует z-index.Проверьте z-index в коде CSS.Yo нужно будет поставить z-index -1 на элементы, за которыми скрывается ваше меню.

Я сейчас работаю над точно такой же проблемой для моей собственной галереи изображений (перейдите на страницу "top image") - Галерея изображений jeyjoo