极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.nav {
list-style: none;
width: 300px;
margin: 100px auto;
}
.nav li{
border: 1px solid #000;
border-bottom: none;
text-indent: 2em;
height: 35px;
position: relative;
}
.nav li:last-child{
border-bottom: 1px solid #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.nav li:first-child{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.nav>li>span{
background:url("right-arrow.png") no-repeat center center;
width: 32px;
height: 32px;
display: inline-block;
position: absolute;
right: 30px;
}
.sub{
/*display: none;*/
}
</style>
</head>
<body>
<ul class="nav">
<li>一级菜单<span></span>
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单<span></span></li>
<li>一级菜单<span></span></li>
<li>一级菜单<span></span></li>
<li>一级菜单<span></span></li>
<li>一级菜单<span></span></li>
<li>一级菜单<span></span></li>
<li>一级菜单<span></span></li>
</ul>
</body>
</html>为什么在网页中显示的效果是这样的呢？
你是不是想要你的二级菜单同对应的一级菜单对齐，因为你的样式中存在定位，而sub一开始没有样式，所以就重叠在一起了。
样式如图
