Выпадающее меню не работает в Firefox / Chrome

Question

Итак, давайте просто скажем, что я получил все это для работы с IE, потому что всегда IE, который создает проблемы.Но теперь выпадающее меню появляется за контентом в других браузерах, таких как Firefox и Chrome.Все, что я сделал, это удалил z-index в div #head.

Веб-сайт: http://www.stingrayimages.ca/

С Z-индексом: он ломается в IE. Без него он не работает в других браузерах.

В любом случае исправить выпадающее меню без добавления z-указатель на голову div?

#head {
    position:relative;
    height: 140px;
    width: 100%;
    background: #FFF;
    filter:alpha(opacity=93);
    padding-top:20px;
    /* CSS3 standard */
    opacity:0.93;
    -moz-box-shadow: 0 0 5px black;
    -webkit-box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px black;
}

Answer 1

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

Кроме того, IE9 показывает ту же проблему, что и Chrome и FireFox 4.

Answer 2

Одна вещь, которую вы можете сделать, это вернуть z-index обратно и найти в нем исправление IE.

Еще одна вещь, которую следует учитывать, это порядок рендеринга и древовидная структура вашего html, так как это влияет на то, что находится сверху. http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ эта статья объясняет это намного лучше, чем я.

Если вам удастся связать пример сайта, над которым вы работаете, нам будет проще дать более конкретный ответ.

Answer 3

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