简单的二级下拉菜单

js

	  var btn = $('.j-navMenu-anim'),
    modal = $('.nav-modal'),
    panel = $('.j-navMenu-panel');
  function hide() {
    modal.removeClass('nav-show')
    panel.css('transform', 'translate3D(0,0,0)')
  }
  modal.click(function() {
    hide()
    $("body").css('overflow-y', 'auto')
  })
  btn.click(function(evt) {
    if (modal.hasClass('nav-show')) {
      hide()
      $("body").css('overflow-y', 'auto')
    } else {
      modal.addClass('nav-show')
      panel.css('transform', 'translate3D(-100%,0,0)')
      $("body").css('overflow-y', 'hidden')
    }
  });
  $('.iconfont').click(function() {
    if ($(this).hasClass('arrowdown')) {
      $(this).removeClass('arrowdown').addClass('arrowup')
      $(this).parent().next().css('display', 'block')

    } else {
      $(this).removeClass('arrowup').addClass('arrowdown')
      $(this).parent().next().css('display', 'none')
    }
  })

html

<ul class="navList">
  <li class="navItem">
    <div class="yiji">
      <a class="pullDown fl" href='javascript:void(0)'>
        扩声系统              </a>
      <span class="iconfont fr arrowdown"></span>
    </div>
    <ul class="item-list clearFix arrowdown">
      <li>
        <a href='/dyt.html'>
          调音台
        </a>
      </li>
    </ul>
  </li>
  <li class="navItem">
    <div class="yiji">
      <a class="pullDown fl" href='javascript:void(0)'>
        分布式系统
      </a>
      <span class="iconfont fr arrowdown"></span>
    </div>
    <ul class="item-list clearFix arrowdown">
      <li>
        <a href='/fbskvmjd.html'>
          分布式KVM节点
        </a>
      </li>
    </ul>
  </li>
</ul>

css

.Menu{width: 200px;padding: 70px 0;}
.Menu .navList{width:100%;}
.Menu .navList .navItem{color:#333;border-bottom:1px solid #ccc;}
.Menu .navList .navItem > .yiji{color:#fff;display:flex;height:40px;justify-content:space-between;align-items:center;padding:0 10px;font-size:14px;}
.Menu .navList .navItem .gywmen{color:#fff;display:flex;height:40px;ustify-content:space-between;align-items:center;padding:0 10px;font-size:14px;}
.Menu .navList .navItem .yiji a{display: block;width: 80%;height: 100%;color: #333;line-height: 40px; font-weight: 800;}
.Menu .navList .navItem .yiji span{width: 15px;height: 15px;display: block;background: url("../images/icon_down.png") no-repeat center center;background-size: 100% 100%}
.Menu .navList .navItem .yiji span.arrowdown{background: url("../images/icon_down.png") no-repeat center center;background-size: 100% 100%}
.Menu .navList .navItem .yiji span.arrowup{background: url("../images/icon_up.png") no-repeat center center;background-size: 100% 100%}
.Menu .navList .navItem .item-list{padding:0 0 12px 20px;display: none;}
.Menu .navList .navItem .item-list >li.dt{font-weight: bold}
.Menu .navList .navItem .item-list >li{height:28px;line-height:28px;width:100%;text-align:left;white-space:nowrap;font-size: 14px;float: left}
.Menu .navList .navItem .item-list >li a{color: #333}
.Menu .navList .navItem .item-list >a{height:28px;line-height:28px;width:100%;text-align:left;white-space:nowrap;font-size: 14px;float: left;color: #fff}
.Menu .navList .navItem > .yiji1{color:#fff;display:flex;height:40px;border-bottom:1px solid #ccc;justify-content:space-between;align-items:center;padding:0 20px;font-size:14px;}
.Menu .navList .navItem > .yiji1 a{display: block;width: 33.3%;height: 100%;color: #333;line-height: 40px; font-weight: 800;}
.Menu .navList .navItem .item-list >li a.avt{color: rgb(0, 123, 211)}