Jquery 如何使下拉菜单具有粘性

我现在有一个水平菜单，第二个水平下拉菜单栏就在下面，你可以在下面看到。但是，下面的二级下拉菜单栏仅在鼠标悬停时保持不变。是否有办法使此辅助菜单栏保持粘性，以便在单击其中的某个选项之前保持可见

@Woodrow大麦这是我直接从破损菜单中获取的CSS

#menu {
font-weight:400;
display: table;
width: 100%;
list-style: none;
position: relative;
top: -20px;
text-align: center;
left: -10px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 20px;
z-index: 1101;
}
#menu.fixed {
position: fixed;
top: 0;
width: 100%;
}
#menu li {
display: table-cell;
list-style: none;
padding-right: 10px;
left: 50px;
vertical-align: middle;
}
#menu > li.active > ul {
background:#FFF;
display: block;
left: 0;
width: 100%;
-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
border-top:thin dotted #999;
top: 32px;
height: 30px;
}
#menu > li > ul {
display: none;
position: absolute;
 text-align: center;

}
#menu li a {
display: block;
padding: 2px 10px;
text-decoration: none;
font-weight: 400;
white-space: nowrap;
color: #333;


}
#menu li a:hover {
color: #28B701;
font-size: 18px;
vertical-align: middle;
font-family: 'Lato', "sans-serif; 700;";
}
#menu li ul li {display: inline-block;
float:none; }

---

是的，@Woodrow Barlow是对的，你需要JS来做这件事。试试这个：

我添加了这个JQuery函数

$('#menu > li').hover(function() {
      $( this ).addClass( "active" ).siblings().removeClass("active");
});

改变了你的想法

#menu > li:hover > ul {...}

将来

---

请在此处添加您的全部代码，只是为了警告您它需要一些javascript。@Akshay我认为作者不小心遗漏了包装

标记。更新的提琴：@WoodrowBarlow是的，我很抱歉，JS很好Hi@lee_很高兴感谢你的帮助，但当在网站上实现时，它在你的JS提琴中无法正常工作。由于某些原因，只有在我单击主菜单中的链接并按住时，底部菜单栏才会出现。只要我把手指从鼠标按钮上拿开，就可以打开底部的菜单栏disappears@DanielNolan听起来您使用了伪类

：active

，而不是@lee_glading创建的类

.active

。请确保您使用的是句号，而不是冒号。@WoodrowBarlow我已经在原始帖子的底部添加了代码，向您展示了我的位置。您好@DanielNolan在快速查看页面（在safari、chrome和FF中）后，现在它似乎可以工作了。猜猜这个问题现在已经解决了？

$('#menu > li').hover(function() {
      $( this ).addClass( "active" ).siblings().removeClass("active");
});

#menu > li:hover > ul {...}

#menu > li.active > ul {...}