Javascript 带有css的jQuery下拉菜单

我已经列出了一些列表，我想当涉及到jQuery并使我的菜单切换到click事件时，我对这些列表感到迷茫

以下是我所拥有的：

问题出在菜单上。当鼠标悬停在元素上时，它会显示，当我单击它时，它会隐藏。但是当我从CSS中删除时

ol > li:hover > ul
{
    display: block;   
}

---

单击菜单2选项卡时，它甚至无法工作。这样做的目的是删除menu2上的“悬停”功能，使其仅适用于“单击”。我怎样才能修好它

您正在尝试切换列表元素，而不是列表本身。只需使用以下JavaScript：

$('ol li.submenuone').click(function() {
    $('ol li.submenuone ul').toggle();
});

并从上面删除您的CSS

---

演示：

使用jquery而不是css

$('ol > li.submenuone').click(function() {
    $('ol > li.submenuone  ul').slideToggle();
  });

---

使用jQuery，最初子菜单应该是隐藏的。然后sho/hide，使用jQuery切换。也更改了css

$（'ol li.subnumone'）。单击（函数（）{
//警惕（“你好”）；
$（'ol li.submenuone ul'）.toggle（）；
});
.nav
{
宽度：100%；
填充：10px0；
背景色：红色；
文本对齐：居中；
盒影：0px-1px 40px黑色；
位置：相对位置；
z指数：9999；
}
ol
{
填充：0；
保证金：0；
列表样式类型：无；
字号：18px；
高度：35px；
线高：200%；
显示：内联块；
字母间距：1px；
}
奥拉
{
颜色：白色；
文字装饰：无；
显示：块；
}
ol>li
{
浮动：左；
宽度：170px；
高度：40px；
右边框：1px虚线#800517；
过渡性质：背景；
过渡时间：.4s；
}
李：第一个孩子
{
左边框：1px虚线#800517；
}
奥利：悬停
{
背景色：#800517；
}
ol>li>ul
{
列表样式类型：无；
填充：0；
保证金：0；
高度：40px；
宽度：100px；
显示：无；
}
ol>li>ul
{
显示：无；
}
ol>li>ul>li
{
填充：2px；
背景色：红色；
位置：相对位置；
z指数：9999；
边框顶部：1px虚线#800517；
}
ol>li>ul>li：第一个孩子
{
边界顶部：0；
}















哦，我明白了，不过我有一个问题，因为从一开始就有问题。要停止阻止打开菜单，我必须使用toggle（e）e.preventDefault？我不清楚您到底想阻止什么。啊，没关系，因为我想让这个子菜单进入另一个子菜单，但是，父子菜单仍然是“开”的。我的坏消息，谢谢你的回答：）谢谢你的时间，@KittMedia解释我做错了什么：）！答案有用吗？是的，也谢谢你的回答，我很感激：）