(图片地址：https://panjiachen.github.io/...)
如图示这种竖向排列的菜单栏，展现成果比拟好，而且交互比拟直观，上面来介绍一下实现步骤
1.先把整体布局写进去
1.1因为子菜单开展膨胀会变动div大小，所以应用flex弹性盒子。
<div class="box"> <ul class="ulList"> <li class="liList"> <p onclick="menu_active(ulOne)">这是第一个子菜单</p> <ul class="childUl" id="ulOne" style="display: none;"> <li>选项1.1</li> <li>选项1.2</li> </ul> </li> <li class="liList"> <p onclick="menu_active(ulTwo)">这是第二个子菜单</p> <ul class="childUl" id="ulTwo" style="display: none;"> <li>选项2.1</li> <li>选项2.2</li> </ul> </li> <li class="liList"> <p onclick="menu_active(ulThree)">这是第三个子菜单</p> <ul class="childUl" id="ulThree" style="display: none;"> <li>选项3.1</li> <li>选项3.2</li> <li>选项3.3</li> </ul> </li> <li class="liList"> <p onclick="menu_active(ulFour)">这是第四个子菜单</p> <ul class="childUl" id="ulFour" style="display: none;"> <li>选项4.1</li> </ul> </li> </ul></div> *{ margin: 0; padding: 0;}.box{ width: 300px; top: 10%; left: 10%; display: flex; position: absolute;}.ulList{ width: 100%; display: flex; left: 20%; top: 20%; flex-direction: column; background-color: grey; position: absolute; list-style: none;}.liList{ width: 100%; height:100px; display: flex; flex-direction: column; background-color: #FF9900; position: relative;}.liList p{ 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，其下的每一个选项下的子菜单栏是不须要再设置flex的，只须要给每一个ul设置宽度，而后每一个li设置雷同用的高度和宽度即可。
.liList ul{ width: 100%; position: relative;}.liList ul li{ width: 100%; height: 60px; line-height: 60px; background-color: #FF4400; list-style: none; text-align: center; position: relative;}2.给每一个菜单选项增加点击事件，抉择开展或者暗藏子菜单
这里应用到抉择语句进行判断
function menu_active(ulId){ if(ulId.style.display == "none"){ ulId.style.display = "block" }else{ ulId.style.display = "none" }}写到这里，代码根本写完了，那就渲染一下看看成果
诶？为什么成果和我想得不一样？
这里会发现二级菜单展现的时候，会被一级菜单笼罩掉。认真寻找后发现问题出在高度设置上
.liList{ width: 100%; line-height: 80px; display: flex; flex-direction: column; background-color: #FF9900; position: relative;}给每一个一级菜单设置了一个100px的高度！这就使得无论怎么改变二级菜单，始终是和一级菜单抵触的，把它去掉就好了。
好啦，一个应用ul列表的竖向菜单栏就做好了✌！
当然你也能够本人渲染的更好看一些✌✌✌
后续如果要给每一个菜单选项增加链接的话也是不难的。
--2022.3.26 21:44