Question

我在wordpress中创建了一个自定义菜单。该菜单包含有孩子的页面。

下拉菜单适用于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>

Answer 1

我用jquery完成了它。由于IE不支持LI：Hover属性。所以我按照这个链接使用jquery将css类添加到选择器。

http://wordpress.org/support/topic/drop-down-menu-not-working-in-ie#post-1065267

我的下拉菜单在IE中不起作用

1 个答案: