Javascript 带有html和css的下拉菜单，希望它在单击其他位置之前保持可见

我正在尝试制作类似MacOS菜单栏菜单的下拉菜单（请参阅此处的代码片段）。到目前为止，它们看起来和工作正常，但菜单确实应该保持可见，直到用户单击（或轻触）屏幕上的某个位置。就像现在一样，一旦你移出菜单，它们就会再次被“隐藏”

到目前为止，它是用纯HTML和CSS完成的，但我的直觉告诉我，这需要少量JavaScript才能达到我想要的效果——但我的JavaScript仍然有点缺乏

我认为每个

ul

元素都需要一个

onhover

事件，该事件将其可见性设置为

“可见”

，然后根窗口或文档需要一个onclick事件将第一级菜单项下的所有内容设置为

“隐藏”

。有人愿意试一试吗

#菜单{z-index:9；
字体系列：“Lucida Grande”，Helvetica，Arial，无衬线；}
#菜单>ul{
填充：0px 10px；
保证金：0；
}
#菜单ul{
列表样式：无；
}
#菜单里{
浮动：左；
位置：相对位置；
左：3倍；
右侧填充：3px；
宽度：自动；
颜色：rgb（68,68,68）；
左边距：0px；
}
#菜单ul-li{
宽度：150px；
左侧填充：15px；
}
#菜单a{
显示：块；
文字装饰：无；
填充物：5px 5px；
颜色：rgb（68,68,68）；
}
#菜单>ul{
位置：绝对位置；
背景：rgb（240240240）；
左：0；
最高：100%；
可见性：隐藏；
不透明度：0.95；
字体大小：15px；
盒影：0 3px 5px rgba（0,0,0,0.12），0 3px 5px rgba（0,0,0,0.24）；
边框左下半径：5px；
边框右下半径：5px；
左边距：0px；
}
#菜单>超链接{
左：100%；
顶部：-3px；
边框左上半径：5px；
边框右上角半径：5px；
}
#菜单>保险单>保险单：最后一个孩子{
利润底部：3倍；
}
#菜单>ul>li：第一个孩子{
利润上限：3倍；
}
#菜单ul hr
{
边框：1px实心rgb（201201201）；
利润率：0px-15px；
宽度：165px；
}
#菜单。李被选中
{
颜色：#407af2；
}
#菜单li>ul{
左边距：0px；
左侧填充：0px；
}
#菜单>ul li，ul li a{
背景：rgb（240240240）！重要；
}
#menu.hoverable li:悬停
{
背景：rgb（0，144，248）；
}
#menu.hoverable ul li：悬停>a
{
颜色：rgb（240、240、240）；
}
/* 
#menu.hoverable ul li:hover>ul，#menu.hoverable ul li>ul.visible，
#menu.hoverable ul li>ul>li>ul.visible
{
能见度：可见；
}
*/ 
#menu.hoverable ul li>ul.visible，
#menu.hoverable ul li:hover>ul，
可见光
{
能见度：可见；
}
#menu.hoverable ul li:悬停，#menu.hoverable ul li:悬停a{
背景：rgb（0，144，248）！重要；
}
.li标题，#菜单。可悬停。li标题：悬停{
背景：rgb（240240240）；
颜色：rgb（68,68,68）；
填充物：5px 5px；
右边填充：10px；
字体大小：bohttp://localhost:9000/sessions/102df527a94/index.html#ld;
}
.菜单右键图标
{
位置：绝对位置；
右：10px；
变换：比例（1.8,1.0）；
}
.导航插入符号
{
转换：scaleX（1.8）；
}
html{
身高：100%；
}
身体{
身高：100%；
保证金：0；
}
.电网{
显示：网格；
网格间距：1px；
身高：100%；
背景色：#aaa；
字体系列：“helvetica Neue”，helvetica，Arial，无衬线；
网格模板列：1fr；
网格模板行：自动最小最大值（15px，自动）1fr 1fr；
网格模板区域：“菜单”“树”“检查器”“视口”；
}
@介质（最小宽度：700px）{
.电网{
/*网格模板列：最小值（自动，最小内容）最小值（自动，最小内容）最小值（自动，100%）*/
/*网格模板列：minmax（自动，最小内容）minmax（10px，20px）minmax（自动，100%）*/
/*网格模板列：minmax（自动，最小内容）minmax（自动，100%）*/
网格模板列：最小最大值（自动，20%）最小最大值（自动，100%）；
网格模板行：自动最小值（自动，最小内容）最小值（自动，100%）；
网格模板区域：“菜单”
“树视口”
“检查员视口”；
}
}
.菜单{
网格区域：菜单；
背景：rgb（219230250）；
z指数：9；
字体大小：15px；
}
.菜单图像{
宽度：16px；
高度：15px；
}
.树{
网格区域：树；
背景：rgb（209209209209）；
调整大小：两者；
溢出：自动；
}
#树根{
填充：0 15px
}
检察官先生{
网格区域：检查员；
字体大小：11px；
背景：#f8f8；
/*调整大小：水平*/
溢出：自动；
z指数：5；
}
.视口{
网格区域：视口；
背景：#e8e8e8；
/*调整大小：两者；*/
溢出：自动；
z指数：1；
}
.viewport div：第一个子对象{
文本对齐：居中；
}
生长树{
列表样式：无；
左边距：1米；
左侧填充：0px；
}
李树荣{
空白：nowrap；
列表样式：无；
左边距：0px；
左侧填充：0px；
}
.扩大，
目录
叶先生{
边缘底部：5px；
右边距：5px；
}
.扩大{
颜色：rgb（119、119、119）；
}
.目录{
颜色：rgb（212、113、113）；
}
叶先生{
颜色：rgb（100190104）；
}
督察，标题{
字体大小：15px；
字体大小：粗体；
颜色：rgb（82,82,82）；
}
.inspector表、.inspector表tr、.inspector表tr td
{ 
溢出：自动；
细胞填充：0；
细胞间距：0；
边界塌陷：塌陷；
文本对齐：左对齐；
}
.检查员表td
{
边框：1px实心rgb（168168168）；
填充物：3px2px；
文本对齐：左对齐；
}
.检查表td：第一个孩子
{
颜色：rgb（78,78,78）；
文本对齐：居中；
}
.inspector表tr:n个孩子（奇数）
{
背景色：rgb（233242 255）；
}
.i-t-m
{
填充：0px；
文本对齐：左对齐；
}
.i-t-v
{
填充：0px；
文本对齐：左对齐；
}
.i-t-v-click
{
颜色：蓝色；
字体：斜体；
字体系列：monospace；
光标：poi
#menu li>ul.visible {
  visibility: visible;
  opacity: 0.95;
  margin-left: 0px;
  padding-left: 0px;
}