2012-02-20 53 views
0

我在wordpress中創建了一個自定義菜單。該菜單含有孩子的頁面。我的下拉菜單在IE中不起作用

下拉菜單在firefox和chrome中可用,但在IE中不起作用。

這是我的CSS代碼。

/* =Menu 
-------------------------------------------------------------- */ 

#access { 

    clear: both; 
    display: block; 
    float: left; 
    margin: 0 auto 6px; 
    width: 100%; 
} 
#access ul { 

    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    z-index: 9999 !important; 

} 
#access li { 

    display: inline; 
    float: left; 
    position: relative; 
    z-index: 9999 !important; 

} 

.menu .menu-item:hover { 
background:#89ab20; 
} 
#access a { 
color:white; 
padding-right: 24px; 

    text-decoration: none; 
} 
#access ul ul { 
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    display: none; 
    float: left; 
    margin: 0; 
    position: absolute; 
    top: 2.8em; 
    left: 0; 
    width: 188px; 
    z-index: 99999; 
    background-color:#89ab20; 

} 
#access ul li ul li { 
border-bottom: 1px solid white; 
    display: list-item; 
    float: none; 

} 
#access ul li ul li a:hover { 
background-color:#0086b2; 
} 
#access ul ul ul { 
    left: 100%; 
    top: 0; 
} 
.sub-menu { 
background-color:#89ab20; 
} 
.sub-menu .menu-item:hover { 
background-color:#0086b2; 
} 

#access ul ul a { 
    font: normal 11px Verdana; 
    width: 135px; /*width of sub menus*/ 
    padding: 7px 10px 7px 10px; 
    height:auto; 
    margin: 0; 
    border:none; 
    background-image:none; 
    border-bottom:#fff solid 1px; 
    text-decoration:none !important; 
    border-bottom:none; 
    display:block; 
} 
#access li:hover > a, 
#access ul ul :hover > a, 
#access a:focus { 
    background-color:#0086b2; 
    text-decoration:none !important; 
} 
#access li:hover > a, 
#access a:focus { 
color:#fff; 
    background-color:#89ab20; 

} 
#access ul li:hover > ul { 
    display: block; 
} 
#access ul li { 
    border-right: 1px solid #FFFFFF; 

    color: white; 
    display: block; 
    font-size: 12px; 
    line-height: 30px; 
    padding: 0 23px; 
    text-decoration: none; 
} 
#access .current-menu-item > a, 
#access .current-menu-ancestor > a, 
#access .current_page_item > a, 
#access .current_page_ancestor > a { 
    font-weight: bold; 
} 
.current_page_item { 
    background-color: #89AB20; 
    color: #FFFFFF; 
} 

這裏是我生成的html。請任何能解決我的問題的人。提前致謝。

<div class="navigation"> 
          <nav role="navigation" id="access"> 
           <h3 class="assistive-text">Main menu</h3> 
                  <div class="skip-link"><a title="Skip to primary content" href="#content" class="assistive-text">Skip to primary content</a></div> 
           <div class="skip-link"><a title="Skip to secondary content" href="#secondary" class="assistive-text">Skip to secondary content</a></div> 
                  <div class="menu-main-menu-container"><ul class="menu" id="menu-main-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69 first-child" id="menu-item-69"><a href="">About</a> 
    <ul class="sub-menu"> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141 first-child" id="menu-item-141"><a href="">About</a></li> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140" id="menu-item-140"><a href="">About</a></li> 
    </ul> 
    </li> 
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64" id="menu-item-64"><a href="">About</a> 
    <ul class="sub-menu"> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67 first-ch 

ild" id="menu-item-67"><a href="">About</a> 
    <ul class="sub-menu"> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68 first-child" id="menu-item-68"><a href="">About</a></li> 
    </ul> 
</li> 
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65" id="menu-item-65"><a href="">About</a> 
    <ul class="sub-menu"> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66 first-child" id="menu-item-66"><a href="">About</a></li> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-230 last-child" id="menu-item-230"><a href="">About</a></li> 
    </ul> 
</li> 

</ul> 
</li> 
</ul></div> 
</nav><!-- #access --> 
</div> 
+0

你通過_it的意思不IE_工作。什麼不行? – elclanrs 2012-02-20 07:45:09

+0

我在wordpress中創建了一個下拉菜單。鼠標懸停在頁面上列出其子。但在IE中,當我通過鼠標在頁面上時,孩子們沒有顯示。我正在談論導航菜單。 – Ahmad 2012-02-20 07:47:34

+1

什麼版本的IE?它發生在IE9中嗎?如果你在[jsFiddle](http://jsfiddle.net)上提供了一個例子,這將是有用的。 – elclanrs 2012-02-20 07:48:23

回答