jQuery Accordion Menu MultilevelはアコーディオンメニューjQueryプラグイン。

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

<div class="content">
      <div class="colors"><a href="javascript:void(0)" class="default"> </a><a href="javascript:void(0)" class="blue"> </a><a href="javascript:void(0)" class="white"></a></div>
      <nav>
        <div id="menu" class="menu">
          <div class="menu-header"> ACCORDION MENU </div>
          <ul>
            <li class="active"><a href="#"><i class="fa fa-home"> </i>Home</a></li>
            <li><a href="#"><i class="fa fa-file-image-o"> </i>Gallery</a>
              <ul class="submenu">
                <li><a href="#"> Graphics</a></li>
                <li><a href="#"> Photoshop</a></li>
              </ul>
            </li>
            <li><a href="#"><i class="fa fa-cog"> </i>Services</a>
              <ul class="submenu">
                <li><a href="#"> Web Design </a>
                  <ul class="submenu">
                    <li><a href="#"> WordPress</a></li>
                    <li><a href="#"> Joomla</a></li>
                  </ul>
                </li>
                <li><a href="#"> Hosting</a></li>
                <li><a href="#"> Design </a></li>
              </ul>
            </li>
            <li><a href="#"><i class="fa fa-newspaper-o"> </i>News<span class="menu-label"> 8 </span></a></li>
            <li><a href="#"><i class="fa fa-user"> </i>About</a></li>
            <li><a href="#"><i class="fa fa-envelope"> </i> Contact</a></li>
          </ul>
          <div class="menu-footer"> @ Test</div>
        </div>
      </nav>
    </div>

• Tag
• Accordion
• jQuery
• Navigation
• Responsive