Html 使CSS悬停菜单单击而不是悬停

我有一个CSS/HTML菜单，其中包含以下CSS代码：

#nav {
    background-color:#F36F25;
    margin:0 0 5px 0;
    width: 100%;
    height:35px;
    left:0;
    z-index:1;
    border-top:2px solid #FFFFFF;
    border-bottom:2px solid #FFFFFF;
}
#nav>li {
    float:left;
    list-style:none;
}
#nav li:hover ul {
    position:absolute;
    display:block;
    z-index:9999;
}
#nav li a {
    display: inline-block;
    padding: 8px;
    margin:0;
    background: #F36F25;
    text-decoration: none;
    color: #FFFFFF;
    border:1px solid #F36F25;
}
#nav li:hover > a, #nav li a.active {
    color:#F36F25;
    background: #FFFFFF;
    border:1px solid #F36F25;
    cursor:pointer;
}
#nav li ul {
    position:absolute;
    display: none;
    list-style:none;
    margin:0;
}
#nav li ul li {
    margin-top:0;
    margin-right:0;
    margin-bottom:0;
    margin-left:-40px;
}
#nav li ul li a {
    background-color: #F36F25;
    color:#FFFFFF;
    border:1px solid #F36F25;
    width:145px;
}
#nav li ul li a:hover {
    background-color: #FFFFFF;
    color:#F36F25;
    border:1px solid #f36f25;
}
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

如何确保onhover事件保持不变，但使子菜单在单击时显示，而不是在用户悬停在父链接上时显示

如果需要的话，我很乐意使用Jquery或Javascript，但是如果可能的话，完整的css会很好

我想你可以：聚焦而不是：像这样悬停 更新此代码

或者通过js 李海军：聚焦ul{ 位置：绝对位置； 显示：块； z指数：9999；

---

} 假设您希望在单击元素时更改显示策略。假设元素有一个选择器。在这种情况下，可以使用jQuery定义此事件：

$(selector).click(function() {
    if ($(this).hasClass("clicked")) {
        $(this).removeClass("clicked");
    } else {
        $(this).addClass("clicked");
    }
});

而且你还需要一些CSS来支持.clicked。让我们假设您的选择器是foo。那么你需要这样的规则：

#foo {
    /*Add some stuff*/
}

#foo.clicked {
    /*Add some stuff*/
}

---

发布HTML并制作Fiddle您必须使用JS来处理单击事件。为了你自己的利益，研究点击事件和摆弄。如果你希望有人在这里为你做的工作，并给你解决方案，你必须给html