一个简略的二级导航，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;}