0

我的导航菜单适用于 IE8，但适用于 IE7、9、10。似乎#nav_wrap 隐藏了悬停时的子菜单（如果我扩展#nav_wrap 的高度，我可以看到悬停时的子菜单，但只能看到父容器高度添加的数量）。我现在迷路了，不知道如何解决它，因为它适用于所有其他 IE、Chrome、Safari 和 Moz。任何人请有一个想法？？？

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;
   }

网站_

4

1 回答 1

0

对于那些曾经有过这个问题的人来说，它是通过删除来修复的

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

从所有导航容器中。不知道为什么。

于 2013-09-11T03:18:02.173 回答