jquery - CSS Dropdown类问题+需要Jquery

我正在尝试为 Wordpress 主题创建下拉菜单，但有一些愚蠢的问题无法解决，因为我已经尝试修复了 3 个多小时。

一切正常，除非我将鼠标悬停在二级下拉列表父级(第一个下拉列表)突出显示主父级突出显示类上。

我还想要任何可以用我现有的 css 和 wordpress 菜单实现的 jquery 脚本，其中父链接上的箭头将在具有子菜单时自动出现。并尽可能淡出效果，但对此不必太担心。

请查找所附图片以获得问题的视觉引用。 enter image description here

同时发布 css 和 html 代码(html 从源代码复制，因为不能从 wordpress 获取)

/*Nav */
#main-nav{
    background-color: #333333;
    border-bottom: 1px solid #444444;
    border-top: 1px solid #383838;
    box-shadow: 0 2px 0 0 #262626, 0 -1px 0 0 #171717;
    display: block;
    margin-bottom: 1px;
    min-width: 960px;
    z-index: 3100   
}

#main-nav #nav-group{
    width:960px;
    margin:0 auto;
}

#main-nav #nav-group .main-menu-cont{
    float:left;
}

#main-nav li{
    display: inline-block;
    float: left;
    line-height: 18px;
    position: relative;
    z-index: 5000;
    padding-bottom:6px;
}

#main-nav a {
    border-bottom: 1px solid transparent;
    color: #C5C5C5;
    display: inline-block;
    font-size: 13px;
    line-height: 18px;
    margin-top: 12px;
    padding: 6px 10px 8px;
    position: relative;
    text-shadow: 0 0 0 transparent, 0 1px rgba(29, 29, 29, 0.2);
    top: -1px
}

/* Nav Links*/
#main-nav a:link,#main-nav a:visited {

}

#main-nav li:hover > a,#main-nav a:active,#main-nav a:focus,#main-nav .current_page_parent > a,#main-nav .current_page_item > a {
    background: #d0441b;
    border-bottom: 1px solid #4D0000;
    color: #FFFFFF;
    text-decoration: none;
}

#main-nav li ul{
    background-color: #FFFFFF;
    border-bottom: 1px solid rgba(35, 35, 35, 0.2);    
    display: none;
    left: 0;
    padding: 6px 15px;
    position: absolute;
    top: 44px;
    width: 150px;
    z-index: 9999;
    box-shadow: 4px 4px 2px 0 rgba(35, 35, 35, 0.1);
}

#main-nav li:hover ul{
    display:block;
}

#main-nav li li{
    display: block;
    width: 150px;
    font-size: inherit;
    line-height: 24px;
    margin: 0;
    padding: 0;
    z-index: auto;
    position:relative;
}

#main-nav li li a{
    display:block;
    background:none;
    color:#7E7E7E;
    padding:3px 0;
    margin:0;
    width:150px;
    border:none;
    text-shadow:none;
}

#main-nav li li a:hover{
    background: none repeat scroll 0 0 transparent;
    color: #232323;
    border:none;
    display:block;
}

#main-nav li li ul{
    background-color: #FFFFFF;
    border-bottom: 1px solid rgba(35, 35, 35, 0.2);
    box-shadow: 4px 4px 0 0 rgba(35, 35, 35, 0.1);
    display: none !important;
    left: 145px;
    padding: 6px 15px;
    position: absolute;
    top: -1px;
    width: 150px;
    z-index: 9999;
}

#main-nav li li:hover ul{
    display:block !important;
}

#main-nav li > a > li:hover > a{
    background:#fff !important;
}


/* DownStates*/
#main-nav li > .sub-menu > .current_page_item a {
    background:none !important;
    color:#BC3415 !important;
    cursor:default;
    border:none;
}

这是html代码

<nav role="navigation" class="horiz-list clearfix" id="main-nav">
    <div class="clearfix" id="nav-group">
        <div class="main-menu-cont">
            <ul class="clearfix">
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-85" id="menu-item-85">
                    <a href="http://localhost/mediatuts/">Home</a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-51 current_page_item menu-item-86" id="menu-item-86">
                    <a href="http://localhost/mediatuts/about/">About</a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87" id="menu-item-87">
                    <a href="http://localhost/mediatuts/contact-us/">Contact Us</a>
                    <ul class="sub-menu">
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88" id="menu-item-88">
                            <a href="http://localhost/mediatuts/contact-us/our-location/">Our Location</a>
                        </li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89" id="menu-item-89">
                            <a href="http://localhost/mediatuts/links/">Links</a>
                        </li>
                    </ul>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90" id="menu-item-90">
                    <a href="http://localhost/mediatuts/news/">News</a>
                    <ul class="sub-menu">
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91" id="menu-item-91">
                            <a href="http://localhost/mediatuts/news/company-history/">History</a>
                        </li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92" id="menu-item-92">
                            <a href="http://localhost/mediatuts/news/our-company/">Our Company</a>
                        </li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93" id="menu-item-93">
                            <a href="http://localhost/mediatuts/news/our-staff/">Our Staff</a>
                        </li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94" id="menu-item-94">
                            <a href="http://localhost/mediatuts/news/our-staff/employment-opportunities/">Employment Opportunities</a>
                            <ul class="sub-menu">
                                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95" id="menu-item-95">
                                    <a href="http://localhost/mediatuts/sample-page/">Sample Page</a>
                                </li>
                                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96" id="menu-item-96">
                                    <a href="http://localhost/mediatuts/support/">Support</a>
                                </li>
                                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-97" id="menu-item-97">
                                    <a href="#">Sub1</a>
                                </li>
                                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-98" id="menu-item-98">
                                    <a href="#">Sub2</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    <div>

</div>
</div>
</nav>

最佳答案

尝试使用这个规则:

#nav-group  > .main-menu-cont > ul >li:hover > a {
background: #d0441b;
border-bottom: 1px solid #4D0000;
color: #FFFFFF;
text-decoration: none;

而不是这个:

#main-nav li:hover > a,#main-nav a:active,#main-nav a:focus,#main-nav .current_page_parent > a,#main-nav .current_page_item > a {
background: #d0441b;
border-bottom: 1px solid #4D0000;
color: #FFFFFF;
text-decoration: none;

检查 jsfiddle

关于jquery - CSS Dropdown类问题+需要Jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9102926/

jquery - CSS Dropdown类问题+需要Jquery

上一篇：css - 将文本与 IE 中的 div 内的输入字段对齐

下一篇：css - GWT DockLayoutPanel 单元格之间的间隙