关于css3:一个简单的二级导航

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