0
Мое навигационное меню будет работать в IE8, но работает в IE7,9,10. Похоже, что #nav_wrap скрывает подменю при наведении (если я расширяю высоту #nav_wrap, я могу видеть подменю при наведении, но только количество, добавленное по высоте родительского контейнера). Я потерялся в этот момент и не знаю, как его решить, поскольку он работает во всех других IE, Chrome, Safari и Moz. У кого-нибудь есть идея?Выпадающее меню скрыто от родителя div
HTML
<div id="nav_wrap">
<div id="nav">
<?php wp_nav_menu(array('theme_location' => 'header-menu',)); ?>
</div>
</div>
CSS
#nav_wrap {
height: 38px;
width: 100%;
margin: -20px auto;
position: absolute;
left: 0;
z-index: 400;
}
/*-- Nav --*/
#nav {
width: 648px;
height: 98%;
z-index: 10;
margin: 0px auto;
font-family: 'Marcellus SC', serif;
font-size: 16px;
letter-spacing: 1px;
font-style:italic;
z-index: 400;
background: #dc0000; /* Old browsers */
background: -moz-linear-gradient(top, #dc0000 0%, #650101 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dc0000), color-stop(100%,#650101)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dc0000 0%,#650101 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dc0000 0%,#650101 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #dc0000 0%,#650101 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dc0000', endColorstr='#650101',GradientType=0); /* IE6-9 */
background: linear-gradient(top, #dc0000 0%,#650101 100%); /* W3C */
}
#nav ul,
#nav li,
div.menu ul,
div.menu ul li,
ul.menu, ul.menu li {
list-style: none;
padding: 0;
margin: 0;
display: inline;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
display: block;
padding: 8px 12px;
margin: 1px;
font-size: 15px;
white-space: nowrap;
border-radius: 24px;
color: white;
-webkit-transition: color .3s ease-in-out;
-moz-transition: color .3s ease-in-out;
-o-transition: color .3s ease-in-out;
}
#nav ul li a:hover { color: #081b3d; }
#nav ul ul {
position: absolute;
top: -99999px;
left: 0;
opacity: 0; /* Hide sub level */
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
z-index: 1497;
background: #dc0000;
padding: 2px;
border: 1px solid #dc0000;
border-top: none;
box-shadow: #111 0 3px 14px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
#nav ul ul ul {
position: absolute;
top: -99999px;
left: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
border-radius: 6px;
border: 1px solid #dc0000;
}
#nav ul li:hover > ul {
opacity: 1;
position: absolute;
top: 99%;
left: 0;
z-index: 497;
}
#nav ul ul li:hover > ul {
position: absolute;
top: 0;
left: 100%;
opacity: 1;
z-index: 497;
background: #081b3d;
}