ОК, так что я посмотрел, и есть хорошие и плохие новости;)
фильтр непрозрачности в #head div означает, что overflow: hidden запускается, поэтому нет меню (боюсь, это нежелательный побочный эффект фильтров и переполнения) .. удалите его, и вы можете получить Z-индекс, который вам нужен в любом случае
рядом, чтобы получить прозрачность (непрозрачность) для ваших выпадающих меню, вы можете просто использовать rgba(255,255,255,0.9) в правиле #nav ul li ul вместо #fff; (хотя оставьте #fff перед этим правилом в качестве запасного варианта для браузеров, которые еще не могут сделать rgba() .. читать дальше!)
Это почти всем нравится - теперь вы также можете сделать прозрачность rgba() для IE, используя фильтр градиента.
поэтому правило, с которым я столкнулся, выглядело так (в условном комментарии IE):
#nav ul li ul {
zoom: 1;
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); /* IE6 & 7 */
/* behavior: url(PIE.htc);*/ /* yuk filter */
}
и я подумал, что было бы хорошо поехать ..
НО плохие новости
поведение закомментировано, потому что вы можете иметь только один или другой, прозрачный или закругленные углы :( очевидно
Хотя я не проводил слишком много исследований, поэтому YMMV
Я также заметил одну или три проблемы в IE7, не уверен, хотите ли вы поддерживать это, но в случае, если вы это делаете ... или хотите проверить мой окончательный код, который получил его на этом этапе, я вставил его в Pastebin
этот код заменяет ваш основной CSS - правило #head и целое /*navigation*/ section
Обновление: больше хороших новостей и немного плохих!
вы можете иметь прозрачность и закругленные углы благодаря собственному свойству CSS3 PIE -pie-background, , но , но также не тени от ящика, как PIE имеет дело с тенью блока означает, что он заполняет div вместо того, чтобы просто рисовать снаружи, поэтому -pie-background показание rgba фона прозрачно, но показывает серый цвет, используемый для тени!
Мое решение:
Я добавил границу, чтобы компенсировать потерю тени, она выглядит не так уж плохо и работает в IE;)
Вот обновление к условному комментарию I выше:
<!--[if lte IE 9]>
<style type="text/css" media="screen">
#nav ul li ul {
box-shadow: none;
-pie-background: rgba(255,255,255,0.9);
border: 3px double #eee;
border-width: 0 3px 3px 3px;
behavior: url(PIE.htc); /* yuk filter */
}
</style>
<![endif]-->