【コピペで簡単】jQueryでアコーディオンメニューを実装する方法

<ul class="accordion">
  <li>
    <div class="meat">鶏</div>
    <ul class="menu">
      <li><a href="#">唐揚げ</a></li>
      <li><a href="#">竜田揚げ</a></li>
      <li><a href="#">フライドチキン</a></li>
    </ul>
  </li>
  <li>
     <div class="meat">牛</div>
    <ul class="menu">
      <li><a href="#">牛タン</a></li>
      <li><a href="#">カルビステーキ</a></li>
     <li><a href="#">サイコロステーキ</a></li>
    </ul>
  </li>
  <li>
    <div class="meat">豚</div>
    <ul class="menu">
      <li><a href="#">生姜焼き</a></li>
      <li><a href="#">酢豚</a></li>
      <li><a href="#">豚トロ</a></li>
    </ul>
  </li>
  <li>
    <div class="meat">鮫</div>
    <ul class="menu">
      <li><a href="#">フカヒレスープ</a></li>
    </ul>
  </li>
</ul>

$(function(){
  $(".menu").hide();
  $(".meat").mouseover(function(){
    $(".menu").slideUp();
    if($("+ul",this).css("display")=="none"){
      $("+ul",this).slideDown();
    }
  });
});

$(".meat").mouseover(function(){ 
  $(this).addClass("hover"); })
  .mouseout(function(){ 
  $(this).removeClass("hover") });

.accordion{
  width:200px;
  padding:0;
  color:#fff;
  background-color:#FF8C65;
}
.accordion,.menu{
  margin:0;
  list-style: none;
}
.meat{
  line-height: 50px;
  font-size:1.1em;
  text-shadow: 2px 4px 3px rgba(0,0,0,.1);
  border-bottom:7px solid #fafafa;
}
.meat:before{
  font-family: "Font Awesome 5 Free";
  content: "f105";
  color: #fff;
  font-weight: 900;
  padding-right:7px;
  padding-left:10px;
  text-shadow: initial;
}
.menu{
  padding-top:5px;
  background-color:#fbfbfb;
}
.menu a{
  display:block;
  text-decoration: none;
  line-height: 40px;
  color:#888;
}
.hover{
  background-color:#fcd69e;
}