<body>
  <header>
    <!--アコーディオンメニュー部分 start-->
    <nav id="accordion">
      <ul>
        <!--1階層アコーディオン start-->
        <li><span>menu1 ▼</span>
          <ul class="close">
            <li><a href="#">menu1.1</a></li>
            <li><a href="#">menu1.1</a></li>
          </ul>
        </li>
        <!--1階層アコーディオン end-->
        <!--2階層アコーディオン start-->
        <li><span>menu2 ▼</span>
          <ul class="close">
            <li><a href="#">menu2.1</a></li>
            <li><a href="#">menu2.1</a></li>
            <li><span>menu2.1 ▼</span>
              <ul class="close">
                <li><a href="#">menu2.2</a></li>
                <li><a href="#">menu2.2</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <!--2階層アコーディオン end-->
        <li><a href="#">menu3</a></li>
      </ul>
    </nav>
    <!--アコーディオンメニュー部分 end-->
  </header>
  <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</body>
ul li {
  list-style: none;
  cursor:pointer;
}

.close{
  display: none;
}
$(function () { 
	$('#accordion li span').click(function() { 
		$(this).next('ul').stop(true, true).slideToggle(); 
	}); 
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.