Question

我的导航菜单可以在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;
   }

site

Answer 1

对于那些曾经有过这种情况的人来说，通过删除

来解决这个问题

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

来自所有导航容器。不知道为什么。

由父div隐藏的下拉列表

1 个答案: