CSS Dropdown 类问题 + 需要 Jquery答案

【问题标题】：CSS Dropdown class issue + Need JqueryCSS Dropdown 类问题 + 需要 Jquery
【发布时间】：2012-02-02 05:15:07
【问题描述】：

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

一切都很好，除非我将鼠标悬停在二级下拉列表父级（第一个下拉列表）突出显示与主父级突出显示类。

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

请查找附件图片以获得该问题的一些视觉参考。

还发布 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>

【问题讨论】：

我重新格式化了html，所以结构清晰了。也说明</div>标签太多，有两个标签虽然没有打开，但是关闭了。
非常感谢。关闭 div 可能是我错过了从我的代码中复制，但它在原始代码中很好。感谢重新格式化。

标签： jquery css wordpress drop-down-menu

【解决方案1】：

尝试使用此规则：

#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

【讨论】：

它删除了许多其他类，例如当前的子父级突出显示，例如如果我在新闻下拉列表中选择“我们的公司”，它也会突出显示新闻，这样用户就可以理解他们选择了新闻的一些子页面，但您的代码将其删除。当子菜单选择其更改颜色（类）或其子菜单链接时，我刚刚发现了其他问题。可能我也需要为第二个下拉菜单写几节课。
我无法测试活动类（或伪类），因为链接来自您的本地主机。播放添加一些规则，例如#main-nav a:active，看看它是如何工作的。