CSS自定义三级菜单下拉框-蒲公英云

CSS自定义三级菜单下拉框

CSS部分

/*分类样式*/
  /* 清楚浮动，使div盒子能被撑起来 */
  .clearfix:after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    clear: both;
  }
  .menu {
    /*position: relative;*/
    margin-left: 8%;
  }
  /* 每一个li标签的样式 */
  .menu li {
    /* 文字居中 */
    text-align: center;
  }
  .menu .menu_top
  {
       height:80px;
  }
  .menu>li a {
    text-decoration: none;
    color: #2aabd2;
    height:38px;
    line-height:38px;
  }
  .menu>li {
    /*让一级菜单的li浮动*/
    /* float: left;*/
  }
  /* 二级菜单样式 */
  .second-menu {
    /* 将二级菜单隐藏 */
    display: none;
    position: absolute;
  }
  /* hover属性，鼠标移动到li标签上触发，将对应li标签的耳机菜单显示，移开后恢复到原来样式 */
  .menu li:hover>ul {
    display: block;
  }
  .second-menu .s_li
  {
       padding:12px 19px;
  }
  .second-menu li a {
    font-size: 18px;
    font-weight: 400;
    color: #434343;
  }
  .second-menu li a:hover
  {
    width: 100%;
    background: #FFD672;
    border-radius: 7px;
    display:inline-block;
  }
  .second-menu {
    width: 167px;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.16);
    /*padding:32px 19px;*/
    top: 110px;
    right: 60px;
    padding:20px 0;
  }
  /* 三级标签样式 */
  .third-menu {
    display: none;
    background: #5a5959;
    position: absolute;
    /* 相对于其父标签（二级标签）进行绝对定位 */
    margin-left: 143px;
    margin-top: -70px;
    width: 154px;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.16);
    padding:20px 25px 25px 25px;
  }
  /* 三级菜单下的 a标签文字颜色 */
  .third-menu li a {
    color: #434343;
    background:#ffffff;
    margin:17px 0;
    display:inline-block;
  }
  .third-menu li a:hover
  {
    background:#ffffff;
    border-radius:0;
    border-bottom:2px solid #FFD672;
  }
  .second-menu li:hover ul {
    display: block;
  }

HTML部分

<div id="main" class="clearfix fl" style="width:72px;height:60px;background: #FBCC5A;border-radius: 8px;text-align:center;padding:13px 0;margin-left:7px;cursor:pointer;">
        <ul class="menu clearfix">
            <li class="menu_top">
            <image src="/dev_cms/UpLoad/Images/202108/AAAA4UIIOQw.png" style="width:20px;height:18px;"></image>
            <div style="font-size: 11px;font-weight: 600;color: #464646;margin-top:5px;">分类</div>
            <ul class="second-menu clearfix">
            {% for item in this.Model.NewsTypes[0].SubImNewsTypes %}
            <li class="s_li">
            <a href="javascript:clickNewType('{
   {item.ID}}')"><span>{
   {item.Title}}</span></a >            
            {% if item.SubImNewsTypes[0] %}
            <ul class="third-menu clearfix">
            {% for subItem in item.SubImNewsTypes %}
             <li>
               <a href="javascript:clickNewType('{
   {subItem.ID}}')"><span class="oneLine titleCont" title="{
   {subItem.Title}}">{
   {subItem.Title}}</span></a >
             </li>
            {% endfor %}
            </ul> 
            {% endif %}
            </li>
            {% endfor %}
            </ul>
        </li>
        </ul>
</div>