Javascript CSS突出显示菜单

我试图让活动CSS下拉菜单标题在被选中时改变颜色。现在，当你将鼠标悬停在它上面时，它会改变，但我希望当你点击它或从它的菜单中选择一个项目时，它会保持高亮显示

我的html如下（全部在div id=“menu”中）：

菜单工作正常，但我不知道如何使用.active来突出显示菜单

---

谢谢

请为您的顶级菜单项服务的li提供住宿id

#stay:hover { background: blue; }

更改为您想要的任何背景/颜色，然后对具有不同ID的其他菜单项执行相同的操作

---

您希望为顶部主菜单项的li提供一个ID，因为当您将鼠标悬停在子菜单上时，您实际上仍将鼠标悬停在特定的li上。活动伪类不是这样工作的，它意味着在您单击按钮时会发生什么。为了获得所需的效果，请创建一个新类，该类与悬停类具有完全相同的属性。然后在每个网站上的不同按钮上进行标记。

这里有一些代码：我不清楚“突出显示菜单”是什么意思——现在单击链接只会导航到页面之外。也许你应该在后端为下一页所需的活动菜单项添加一个类。或者您会为页面加载添加进一步的javascript行为吗？

#menuspacer ul.drop li.active{background color:red；}

并将一个活动类添加到您想要激活的顶部菜单

（使用当前页面）

#menu { margin: 0 auto; padding:0px; text-align:center; vertical-align: top; } 

#menuspacer {position: relative; display:inline-block; margin:0 auto; vertical-align: top; }

ul.drop a {color: #fff; font: arial, helvetica, sans-serif; font-size: 16px; text-decoration: none; display:block;}
ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 0px solid #fff; background: #555; color: #fff;}
ul.drop { position: relative; z-index: 597; }
ul.drop li { text-align:left; position:relative;  padding: 8px 20px; float:left;}
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a;}
ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 150px; background: #555; border: 2px solid #000;  }
ul.drop ul li { float: none; }
ul.drop ul ul { top: -2px; left: 100%; }
ul.drop li:hover > ul { visibility: visible }

#stay:hover { background: blue; }