一个简单的二级导航，HTML结构如下; <ul class="nav"> <li><a href="#">开单业务</a> <ul class="two"> <li><a href="#">销售单据</a></li> <li><a href="#">入库单据</a></li> <li><a href="#">领用单据</a></li> <li><a href="#">报废单据</a></li> </ul> </li> <li><a href="#">查询业务</a> <ul class="two"> <li><a href="#">销售查询</a></li> <li><a href="#">入库查询</a></li> <li><a href="#">领用查询</a></li> <li><a href="#">报废查询</a></li> </ul> </li> <li><a href="#">客户管理</a> <ul class="two"> <li><a href="#">新增客户</a></li> <li><a href="#">修改资料</a></li> <li><a href="#">删除客户</a></li> </ul> </li> <li><a href="#">会员卡管理</a> <ul class="two"> <li><a href="#">新增会员卡</a></li> <li><a href="#">修改资料</a></li> <li><a href="#">删除会员卡</a></li> </ul> </li> <li><a href="#">会员卡种类</a> <ul class="two"> <li><a href="#">新增种类</a></li> <li><a href="#">修改种类</a></li> <li><a href="#">删除种类</a></li> </ul> </li> <li><a href="#">权限管理</a> <ul class="two"> <li><a href="#">新增用户</a></li> <li><a href="#">权限设置</a></li> <li><a href="#">修改密码</a></li> <li><a href="#">删除用户</a></li> </ul> </li> <li><a href="#">退出</a></li> </ul>css样式ul.nav{ width: 100%; display: flex; justify-content: space-around; list-style: none; margin: 0; background: linear-gradient(45deg, #88ad83, #8c1d7800); font-size: 20px; font-weight: bold; position: relative;}ul.two{ position: absolute; width: max-content; list-style: none; font-size: 15px; font-weight: bold; margin: 0; padding: 10px 0; visibility: hidden; background:white; left:0; width:100%; }ul.nav>li:hover{ background:red; padding:0 10px 0 10px;}ul.two li{ float:left; padding:0 0 0 10px;}a{ text-decoration: none;}
