CSS自定义三级菜单下拉框

拼搏现实的明天。 2022-09-10 13:17 240阅读 0赞

## **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>

做个笔记 ❤️