Javascript CSS活动伪类更改状态吞噬onclick事件

我正在改编一个更像“真实”菜单的例子，它应该在用户点击时崩溃

我很喜欢菜单的所有视觉方面都是用css处理的，javascript只是在用户选择一个选项时处理所需的动作。我觉得这是最适合我的特殊应用的方法

然而，我发现当菜单被放在一边时，我分配给每个链接的onclick事件被删除（或忽略）

我发布了两个版本，一个版本的工作原理是当用户选择一个选项时，所需的onclick事件被触发，另一个版本很好地保留了菜单，但也吞噬了onclick事件。我在寻找一个解决方案，将2个结果组合成一个工作菜单，这也满足了点击后将自己放在一边的要求

EDIT刚刚注意到我注释掉了一些额外的代码（这是在找出css唯一解决方案之前的一次尝试。我调用了mouseleave，但没有效果

这两个版本之间的唯一区别是添加了CSS子句：

可以“工作”但不会折叠菜单的版本

var display=document.getElementById（“display”）；
$（文档）.ready（函数（）{
$（'li.menu\u clickable'）。单击（函数（）{
if（this.children.length==1）{
//$（this.trigger（'mouseleave'）；
display.innerHTML='您单击了'+这个.innerHTML；
}
});
})；

/*定义主体样式*/
身体{
字体系列：Arial；
字体大小：12px；
}
#maindiv{
位置：绝对位置；
左：200px；
顶部：0px；
}
/*我们删除UL和LI组件的边距、填充和列表样式*/
#Menuwraper ul，
#梅努瓦珀·乌利{
保证金：0；
填充：0；
列表样式：无；
}
/*我们将背景色和边框底部白色和宽度应用于150px*/
#梅努瓦珀·乌利{
背景色：#7f95db；
边框底部：纯色1px白色；
宽度：150px；
光标：指针；
}
/*当用户将鼠标悬停在li组件上时，我们应用背景悬停颜色*/
#Menuwraper ul li:悬停{
背景色：#6679e9；
位置：相对位置；
z指数：100；
}
/*我们应用链接样式*/
#梅努拉珀·乌尔·李娜{
填充：5px15px；
颜色：#ffffff；
显示：内联块；
文字装饰：无；
}
/****二级菜单****/
/*我们将弹出式菜单的位置设置为绝对，并隐藏ul，直到用户将鼠标悬停在父li项上*/
#美诺拉珀酒店{
位置：绝对位置；
显示：无；
}
/*当用户悬停li项时，我们通过应用display:block显示ul列表，注意：150px是单个菜单宽度*/
#menuwrapper ul li：悬停ul{
左：150px；
顶部：0px；
显示：块；
}
/*我们对二级菜单项应用不同的背景色*/
#美诺说唱歌手{
背景色：#cae25a；
}
/*我们在悬停菜单时更改level 2子菜单的背景色*/
#menuwrapper ul li:悬停ul li:悬停{
背景色：#b1b536；
}
/*我们设计了2级链接的颜色*/
#美诺说唱歌手{
颜色：#454444；
显示：内联块；
宽度：120px；
}
/****三级菜单****/
/*当悬停在第一级菜单上时，我们需要隐藏第三级菜单*/
#menuwrapper ul li：悬停ul li{
位置：绝对位置；
显示：无；
}
/*仅当第三级菜单悬停在第二级菜单父菜单上时，才会显示第三级菜单*/
#menuwrapper ul li:悬停ul li:悬停ul{
显示：块；
左：150px；
排名：0；
}
/*我们更改level 3子菜单的背景色*/
#menuwrapper ul li:悬停ul li:悬停ul li{
背景#86d3fa；
}
/*我们在悬停菜单时更改level 3子菜单的背景色*/
#menuwrapper ul li:悬停ul li:悬停ul li:悬停{
背景：ŦEBC；
}
/*我们改变3级链接的颜色*/
#menuwrapper ul li:悬停ul li:悬停ul li a{
颜色：#ffffff；
}
/*单击链接时隐藏菜单*/
/*
#menuwrapper ul：激活{
显示：无；
}
*/
/*净浮动*/
.清楚{
明确：两者皆有；
}

单击一个选项
一些按钮
菜单下
菜单下

您可以尝试使用鼠标向下键而不是单击

var display=document.getElementById（“display”）；
$（文档）.ready（函数（）{
$（'li.menu\u clickable'）.mousedown（函数（）{
if（this.children.length==1）{
//$（this.trigger（'mouseleave'）；
display.innerHTML='您单击了'+这个.innerHTML；
}
});
})；

/*定义主体样式*/
身体{
字体系列：Arial；
字体大小：12px；
}
#maindiv{
位置：绝对位置；
左：200px；
顶部：0px；
}
/*我们删除UL和LI组件的边距、填充和列表样式*/
#Menuwraper ul，
#梅努瓦珀·乌利{
保证金：0；
填充：0；
列表样式：无；
}
/*我们将背景色和边框底部白色和宽度应用于150px*/
#梅努瓦珀·乌利{
背景色：#7f95db；
边框底部：纯色1px白色；
宽度：150px；
光标：指针；
}
/*当用户将鼠标悬停在li组件上时，我们应用背景悬停颜色*/
#我的说唱歌手：何
#menuwrapper ul:active{
    display:none;
}