一个简单的二级导航

Posted 2021-09-04 心诚则灵

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