希望Jquery只对主菜单而不是子菜单起作用

很高兴来到这里处理堆栈溢出：）

我最近为我的WordPress菜单实现了一些Jquery淡入/淡出代码。我实际上使用了在这个资源中找到的代码。显然，它似乎是一段非常常用的Jquery代码

我能够将它整合到我的WordPress菜单中。在主导航上一切都很好。但是，子菜单采用了与主导航相同的高度和Jquery效果，这是我不想要的。我希望子菜单更薄，只是有一个简单的背景颜色的变化

我的问题是，在使用这个伟大的jquery脚本时，如何使主导航和子导航的样式彼此独立。我已经粘贴了相关的css代码，希望有人能够提供一些见解。它是基于标准的wordpress菜单css的，我希望它是非常不言自明的

#access {
    margin:0; 
    padding:0;
    list-style:none;
    line-height:60px;
}
#access ul {
    font-size: 16px;
    font-family: 'swis721_ltcn_btlight';
    text-transform:uppercase;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
    display:inline-block;
    text-align: center;
}
#access li {
    float:left; 
    background:url(images/default.jpg) no-repeat center center; /
    width:150px;    
    height: 50px;                       
    position:relative;          
}
#access li a {
    z-index:20;     
    display:block;
    position:relative;
    color:#777;
    border-right: 1px dotted #cccccc;
}

#access li .hover {
    background:url(images/over.jpg) no-repeat center center;
    position:absolute;  
    width:150px;    
    height:50px;
    left:0;
    top:0;  
    z-index:0;      
    display:none;       
}

#access ul ul {
    height: 17px !important;
    -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: 50px;
    left: 0;
    width: 150px;
    z-index: 99999;
}

#access ul ul a {
    background:#ccc;
    border-top: 1px dotted #ffffff;
    border-bottom: 1px dotted #ffffff;
    color: #FFF;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.1em;
    text-align: left;
    padding: 5px 10px;
    width: 130px;
    height: 17px;
}

#access ul ul :hover > a {
    height:17px !important;
}

基本上，当我尝试更改“#访问ul a”或“#访问ul:hover>a”中的子菜单样式时，主导航结转的高度和悬停效果

我已经包括了一个链接到这个问题的一个例子。如果您将鼠标悬停在“事件和服务”上，您将看到子菜单问题

下面还添加了Jquery代码：

jQuery(document).ready(function($) {

    //Append a div with hover class to all the LI
    $('#menu-navmenu li').append('<div class="hover"><\/div>');


    $('#menu-navmenu li').hover(

        //Mouseover, fadeIn the hidden hover class  
        function() {

            $(this).children('div').stop(true, true).fadeIn('1000');    

        }, 

        //Mouseout, fadeOut the hover class
        function() {

            $(this).children('div').stop(true, true).fadeOut('1000');   

    }).click (function () {

        //Add selected class if user clicked on it
        $(this).addClass('selected');

    });

});

jQuery（文档）.ready（函数（$）{
//将带有hover类的div附加到所有LI
$（'#menu navmenu li'）。附加（''）；
$（'#menu navmenu li'）。悬停(
//鼠标悬停，隐藏悬停类中的fadeIn
函数（）{
$（this.children（'div'）.stop（true，true.fadeIn（'1000'）；
}, 
//鼠标消失，消失悬停类
函数（）{
$（this.children（'div'）。stop（true，true）。fadeOut（'1000'）；
})。单击（函数（）{
//如果用户单击所选类，则添加该类
$（this.addClass（'selected'）；
});
});

---

谢谢大家的帮助

我没有太多时间，但我很快就完成了：

HTML

---

这里有一个例子。它是无javascript的，但如果需要，您可以实现javascript

您好，我认为您的问题在于您的css没有将第一个ul li从菜单中分离出来，而将ul li从子菜单中分离出来

使用创建新的css

#access .sub-menu li {  
    height: 18px; // the height you need for the submenu or anything else you ant to change                                
}

及

---

你能添加你的jquery部分吗，我想这就是问题所在，谢谢你的回复。我已经在下面包含了我的Jquery代码：Jquery（document）.ready（function（$）{//Append一个带有hover类的div到所有LI$（'#menu navmenu LI'）。Append（'''；$）（'#menu navmenu LI'）。hover（//Mouseover，fadeIn the hidden hover class function（）{$（this）。children（'div'）。stop（true，true）。fadeIn（'1000'）}，//Mouseout，淡出悬停类函数（）{$（this）.children（'div'）.stop（true，true）.fadeOut（'1000'）；}）。单击（函数（）{$（this）.addClass（'selected'）；}）；嘿，Kacey，谢谢你的回复，也谢谢你花时间整理代码。我把它粘贴到我的样式表中，我看到主菜单和子菜单有不同的样式。但是，Jquery效果不再出现在主菜单上。你知道可以做一些调整来确保主菜单保持其酷的jquery效果吗？@user2325396看看这个新提琴：。它包括jQuery，它添加了

hover

元素，并相应地转换它。很好！我会查清楚的。谢谢你的推荐：）嘿，凯西，再次感谢你的推荐。奇怪的是，当我将该站点的Jquery代码与新的css一起使用时，它不起作用。但是当我将原始Jquery代码与新的CSS一起使用时，它起了作用：）有什么区别吗？你的帮助得到了bee的赏识Hey Dany这很有道理。我将这些样式放到CSS中，但子菜单仍然是50px长，并应用Jquery效果。我在“#access.submenu li”样式中添加了一个测试边框，但它没有出现在网站上。你认为这是css的东西还是我需要在Jquery命令中修补的东西？再次感谢Thx的帮助，我认为这更像是一个css的东西。你熟悉chrome或firefox的开发工具吗？他们向你展示每个元素他们使用的css，你可以对它们进行实时编辑以查看。新的css打开了吗？是的，我的Chrome上安装了firebug。我觉得在你的帮助下，我离你越来越近了。我现在只需要找到一种方法来独立地影响子菜单。#access.子菜单li引用是有意义的，但由于某些原因不起作用。还有其他想法吗？啊，有一个输入错误，它的

#访问。子菜单li

，而不是

子菜单

哇，太棒了。我完全错过了！它非常有效，非常感谢您的帮助。Jquery效果不再显示，子菜单的高度正确。但是，这两个子菜单之间仍然存在差距。你能推荐一种最干净的方法来去除这种中间物吗？

#access {}
.menu-navmenu-container { width : 960px; }

#access ul {
    list-style : none;
}
#access li {
    float : left;
    position : relative;
    text-align : center;
    width : 150px;
}
#access li a {
    border-left : 1px solid #ccc;
    display : block;
    line-height : 50px;
}
#access li:last-child a { border-right : 1px solid #ccc; }
#access li a:hover {
    background-image : url("http://streetsmartetiquette.com/wordpress/wp-content/themes/clean/images/over.jpg");
}

#access ul ul {
    border-top : 1px solid #ccc;
    left : 0;
    padding : 0;
    position : absolute;
}
#access ul ul a {
    border-bottom : 1px solid #ccc;
    line-height : normal;
    padding : 5px 0;
}
#access ul ul a:hover {
    background-color : blue;
    background-image : none;
    color : white;
}

#access .sub-menu li {  
    height: 18px; // the height you need for the submenu or anything else you ant to change                                
}

#access .sub-menu li .hover {
height: 18px;// the height you need for the hover effect from the jquery                                
}