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>

做个笔记 ❤️