↓DEMOのようなアコーディオンメニューの作り方を解説します。

• Click here

• menu1

  menu2

  menu3

HTML

  <ul class="site_menu_list">
    <li class="site_menu_content dropdown_btn">Click here</li>
    <li class="dropdown_menu">
    <p class="dropdown_menu_link">menu1</p>
    <p class="dropdown_menu_link">menu2</p>
    <p class="dropdown_menu_link">menu3</p>
    </li>
  </ul>
  

HTMLは、クリックする部分と隠れているメニュー部分に分けてマークアップします。

CSS

      
    .site_menu_list{
      background-color: #f9f9f9;
    }
    .site_menu_content {
        border-top: 1px solid #999;
    }
    .dropdown_btn {
        padding: 20px;
        border-bottom: 1px solid #999;
        position: relative;
    }
    .dropdown_menu_link{
      padding: 10px 20px;
      border-bottom: 1px solid #999;
      background-color: #eee;
    }
      

CSSではとくに表示を消したりなどはしません。

JS

      
  $(function(){

    $(".dropdown_menu").css({display:"none"});
    //タップでコンテンツ出現
    $(".dropdown_btn").on("click", function() {
        $(this).next().slideToggle(500);
    });
  });
      

JSの記述はslideToggleを使うと上記のようにとっても簡単です。 dropdown_btnをクリックしたら、次の要素を表示するという流れです。