插件：左侧下拉菜单

<style type="text/css">
ol, ul {list-style: none;margin:0;padding:0;}
.ul-dropdown *{box-sizing:border-box;line-height: 1.5em;}

.ul-dropdown {position: absolute;left: 0;top: 0;height: 100%;width: 250px;background-color: #f7f7f7;font-family: "Montserrat", sans-serif;padding-top: 20px;font-size: 12px;}
.ul-dropdown li {padding: 0 10px; }
.ul-dropdown li.selected {background-color: #f2f2f2; }
.ul-dropdown li a {display: block;width: 100%;padding: 10px;text-decoration: none;text-transform: uppercase;color: black; }
.ul-dropdown li > ul{display:none;}
.ul-dropdown li > ul li {padding: 0 20px; }
.ul-dropdown li > ul li a {color: gray; }
.ul-dropdown li > ul li > ul li {padding: 10px 30px; }
</style>
<ul class="ul-dropdown">
  <li>
    <a href="#">菜单1</a>
    <ul>
      <li><a href="1.html" target="main">aaa</a></li>
      <li><a href="1.html" target="main">aaa</a></li>
      <li><a href="1.html" target="main">aaa</a></li>
      <li><a href="1.html" target="main">aaa</a></li>
    </ul>
  </li>

  <li>
    <a href="#">菜单2</a>
    <ul>
      <li><a href="bb_list.html" target="main">列表页</a></li>
      <li><a href="bb_add.html" target="main">添加</a></li>
    </ul>
  </li>
  <li>
    <a href="#">菜单3</a>
    <ul>
      <li><a href="bb_list.html" target="main">列表页</a></li>
      <li><a href="bb_add.html" target="main">添加</a></li>
    </ul>
  </li>
  <li>
    <a href="#">菜单4</a>
    <ul>
      <li><a href="bb_list.html" target="main">列表页</a></li>
      <li><a href="bb_add.html" target="main">添加</a></li>
    </ul>
  </li>

</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="tendina.js"></script>
<script>
$('.ul-dropdown').tendina({
    animate: true,
    speed: 200,
    //openCallback: function($clickedEl) {
    //    console.log($clickedEl);
    //},
    //closeCallback: function($clickedEl) {
    //    console.log($clickedEl);
    //}
})
</script>