HTML--ul-li实现垂直菜单栏

*{边距：0;填充：0;}.box{宽度：300px;前10名％;左：10%；显示：弹性；位置：绝对；}.ulList{宽度：100%；显示：弹性；左：20%；顶部：20%；弹性方向：列；背景色：灰色；位置：绝对；列表样式：无；}.liList{宽度：100%；高度：100px；显示：弹性；弹性方向：列；背景色：#FF9900；tion:relative;}.liListp{font-size:20px;text-align:center;}1.2首先隐藏子菜单下的ul这里需要注意一点：当list-style设置为none时，你会发现li前面的那个点虽然消失了，但是还是占了空间。如下图所示，这是因为li默认有margin和padding。这时候只需要设置为0即可，为了方便，直接全局修改即可：*,body{margin:0;padding:0;}1.3为一级ul设置flex，其下每个option下的子菜单栏不需要再设置flex，只需要为每个ul设置width，然后设置相同的height和width每里。.liListul{宽度：100%；位置：相对；}.liListulli{宽度：100%；高度：60px；行高：60px；背景色：#FF4400；：中心;position:relative;}2.为每个菜单选项添加点击事件，选择展开或隐藏子菜单这里使用选择语句判断函数menu_active(ulId){if(ulId.style.display=="none"){ulId.style.display="block"}else{ulId.style.display="none"}}写到这里，代码基本写完了，渲染一下看看效果？为什么效果和我预期的不一样？在这里你会发现，当二级菜单显示时，它会被一级菜单覆盖。仔细查找，发现问题出在高度设置上。liList{宽度：100%；行高：80px；显示：弹性；弹性方向：列；背景色：#FF9900；position:relative;}给每个层级菜单设置100px的高度！这使得二级菜单不管怎么改，总是和一级菜单冲突，去掉就行了。好了，一个使用ullist的垂直菜单栏就做好了?！当然你也可以自己渲染的更漂亮???如果你以后想给每个菜单选项添加链接，也不难。--2022.3.2621:44