Javascript 如何将菜单从悬停更改为单击

我有一个菜单使用ul/li编写，并使用下面的css在鼠标上方工作。现在我需要将鼠标悬停行为改为点击。如何做？请帮忙

#导航{
浮动：左！重要；
字体：粗体12px世纪哥特式，Arial圆形MT粗体，Arial，Helvetica，无衬线；
边框：1px实心#121314；
边框顶部：1px实心#2b2e30；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
#导航ul{
保证金：0；
填充：0；
列表样式：无；
}
#李国荣{
浮动：左！重要；
}
#海军ulli a{
浮动：左！重要；
颜色：深蓝；
填充：10px 20px；
文字装饰：无；
背景#3C4042；
背景：-webkit渐变（线性，左下，左上，颜色停止（0.09，rgb（59,63,65）），颜色停止（0.55，rgb（72,76,77）），颜色停止（0.78，rgb（75,77,77））；
背景：moz线性梯度（中底，rgb（59,63,65）9%，rgb（72,76,77）55%，rgb（75,77,77）78%）；
背景：-o-线性梯度（中底，rgb（59,63,65）9%，rgb（72,76,77）55%，rgb（75,77,77）78%）；
框阴影：0 1px 0 rgba（255，255，255，0.1）插入，0 0 5px rgba（0，0，0.1）插入；
左边框：1px实心rgba（255,255,255,0.05）；
右边框：1px实心rgba（0,0,0,0.2）；
文本阴影：0-1px1pRGBA（0,0,0,0.6）；
}
#纳夫利乌尔{
背景#3C4042；
背景图像：-webkit渐变（线性、左下、左上、颜色停止（0.09，rgb（77,79,79））、颜色停止（0.55，rgb（67,70,71））、颜色停止（0.78，rgb（69,70,71））；
背景图像：-莫兹线性梯度（中底，rgb（77,79,79）9%，rgb（67,70,71）55%，rgb（69,70,71）78%）；
背景图像：-o-线性梯度（中底，rgb（77,79,79）9%，rgb（67,70,71）55%，rgb（69,70,71）78%）；
边界半径：0 10px 10px；
-moz边界半径：0 10px 10px；
-webkit边界半径：0 10px 10px；
左：-999em；
利润率：35px0；
位置：绝对位置；
宽度：160px；
z指数：9999；
盒影：0.15px rgba（0,0,0,0.4）插入；
-moz盒阴影：0 15px rgba（0,0,0,0.4）插入；
-webkit盒阴影：0 15px rgba（0,0,0,0.4）插入；
边框：1px实心rgba（0,0,0,0.5）；
}
#纳夫利乌拉酒店{
背景：无；
边界：0无；
右边距：0；
垫面：3件；
垫底：3件；
宽度：120px；
盒影：无；
-莫兹盒阴影：无；
-webkit盒阴影：无；
边框底部：1px实心透明；
边框顶部：1px实心透明；
文本对齐：左对齐；
}
#导航李a：悬停，
#导航ulli：悬停>a{
颜色：白色；
背景：#5C9ACD；
背景：-webkit渐变（线性，左下，左上，颜色停止（0.09，rgb（77,79,79）），颜色停止（0.55，rgb（67,70,71）），颜色停止（0.78，rgb（69,70,71））；
背景：moz线性梯度（中底，rgb（77,79,79）9%，rgb（67,70,71）55%，rgb（69,70,71）78%）；
背景：-o-线性梯度（中底，rgb（77,79,79）9%，rgb（67,70,71）55%，rgb（69,70,71）78%）；
文本阴影：0 1px 0 rgba（255，255，255，0.2），0-1px#000；
}
#导航：悬停，
#导航ul li:悬停>a{
颜色：白色；
背景：#5C9ACD；
背景：-webkit渐变（线性，左下，左上，颜色停止（0.17，rgb（6111177）），颜色停止（0.51，rgb（80136199）），颜色停止（1，rgb（92154205））；
背景：莫兹线性梯度（中底，rgb（6111177）17%，rgb（80136199）51%，rgb（92154205）100%）；
背景：-o-线性梯度（中底，rgb（6111177）17%，rgb（80136199）51%，rgb（92154205）100%）；
边框底部：1px实心rgba（0,0,0,0.6）；
边框顶部：1px实心#7BAED9；
文本阴影：0 1px rgba（255,255,255,0.3）；
}
#李海军：悬停{
左：自动；
}
#李莉{
利润率：-1px0160px；
-webkit边界半径：0 10px 10px 10px；
-moz边界半径：0 10px 10px 10px；
边界半径：0 10px 10px 10px；
可见性：隐藏；
}
#导航李莉：悬停{
能见度：可见；
}
#nav ul li:最后一个孩子>a{
-moz边界半径：0 10px 10px；
-webkit边界半径：0 10px 10px；
边界半径：0 10px 10px；
}
#nav ul li:第一个孩子>a{
-moz边界半径：0 10px 0 0；
-webkit边界半径：0 10px 0 0；
边界半径：0 10px 0 0；
}

警报
报告
管理

对单击事件使用Jquery。 创建一个具有悬停属性的CSS类，并将该类添加到元素中

例如：-

---

如果您试图使用纯CSS，那么可以使用：target

<a href="#some_id">Show things on click</a>

---

将激活。

您可以通过CSS单独实现这一点，而无需任何JavaScript，方法是为父级

s提供

tabindex

属性，然后使用

：focus

伪类而不是

：hover

但是，这种方法会牺牲一件事，那就是通过再次单击父元素来关闭子菜单

这里有一个非常简单的例子

*{框大小：边框框；颜色：#fff；字体系列：arial；字体大小：14px；边距：0；填充：0；}
保险商实验室{
背景：#000；
线高：30px；
列表样式：无；
}
#菜单>李{
位置：相对位置；
}
p{
光标：指针；
填充：0 5px；
}
ul{
边框顶部：1px实心#fff；
位置：绝对位置；
显示：无；
左：0；
文本缩进：5px；
顶部：30px；
最小宽度：100%；
}
#菜单>李：聚焦{
显示：块；
}

菜单<
<a href="#some_id">Show things on click</a>

#some_id:target {...}

<ul class="dropdown">
    <li><a href="/Requirement/Create">New</a></li>
    <li><a href="/Requirement/List">Search/View</a></li>
</ul>

#nav .dropdown { display: none; }
#nav .active .dropdown { display: block; }

$(function() {
    var $nav = $("#nav");
    var $items = $nav.find(" > ul > li");

    $items.on("click", function(evt) {
        evt.preventDefault();        
        var $current = $(this);
        var $toggle = $current.is(".active") ? 'removeClass' : 'addClass';
        $current.siblings().removeClass("active").end()[$toggle]("active");
    });
});