关于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;
}