如何用ul+li的嵌套实现多级菜单效果？_html/css_WEB-ITnose

我想要用ul+li实现多级动态菜单，可以灵活添加元素和删除元素。
预期的效果如下：（图中的线是我画的，帮助理解各元素关系的，实际页面中不需要。）


但是现实的效果惨不忍睹，添加元素功能实现了，但是排版是乱的，完全看不出来逻辑关系
截图如下：


代码如下：


ul {
padding: 0;
margin: 0;
height: auto;
position: relative;
display: block;
border:2px solid;
border-radius:10px;
-moz-border-radius:10px; /* Old Firefox */

}
li {
display: block;
padding: 10px;
padding-left: 20px;
margin: 0;
border: 0px;
height: auto;
min-height: 25px;
position: relative;
width: auto;
vertical-align: middle;
white-space:nowrap;
display:compact

}

工程名称：


项目名称： 子项名称：

查看更多关于如何用ul+li的嵌套实现多级菜单效果？_html/css_WEB-ITnose的详细内容...