Я создал выпадающее меню, которое отлично работает в Opera, FF, Chrome и Safari.
Но, конечно, это не работает в IE 8.
Меню можно посмотреть здесь: http://sanabygg.stiengenterprises.com - пункт меню Systemgulv
.
Может кто-нибудь сказать мне, почему это не работает здесь
Вы можете увидеть песочницу с решением: http://jsfiddle.net/bCJKd/2/
Из того, что я вижу, это не проблема z-index
.
Это CSS, который я использую:
#mainmenu
{
display: block;
line-height: 30px;
height: 30px;
font-size: 1.3em;
text-transform: uppercase;
font-family: Cuprum, Georgia, Times, Arial, serif;
float: right;
padding-top: 43px;
position: relative;
z-index:auto;
}
/* Sub navigation */
#menu-main-menu ul.sub-menu {
position: absolute;
z-index:999;
min-width: 130px;
visibility:hidden;
padding-bottom: 5px;
color: #fff;
font-size: 0.80em;
padding: 5px;
background-color: rgba(0, 0, 0, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
}
#menu-main-menu li:hover ul, #menu-main-menu li li:hover ul,
#menu-main-menu li li li:hover ul, #menu-main-menu li.sfhover ul,
#menu-main-menu li li.sfhover ul, #menu-main-menu li li li.sfhover ul {
visibility: visible;
}