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 に答える