2013-09-11 175 views
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; 
    } 

site

回答

0

對於那些誰過這一點,是固定由所有次取出

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dc0000', endColorstr='#650101',GradientType=0) !important; /* IE6-9 */ 

e導航容器。不知道爲什麼。