[jQuery CSS]jQueryで手っ取り早くドロップダウンメニュー作っちゃうよ！3階層目以降は対応しないよ！

新年あけましておめでとうございます。
今年もよろしくお願い致します。

さて宣言通り週一で更新していきますよ。

新年一発目はみんな大好きjQuery！
泣く子も黙るドロップダウンメニュー！

デモ

See the Pen jWypXb by mitsuki sagayama (@sagayama) on CodePen.

3階層目以降は対応しないよ！ﾃﾍｯ

html

普通にulを入れ子で書いていくだけですが、もちろん3階層目以降は対応しませんので。
head内に

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
  $('.menu li').hover(function(){
  $("ul:not(:animated)", this).slideDown();
  }, function(){
  $("ul.child",this).slideUp();
  });
  });
</script>

body内に

<ul class="menu">
  <li><a href="#">menu01</a>
    <ul class="child">
      <li><a href="#">menu01-1</a></li>
      <li><a href="#">menu01-2</a></li>
      <li><a href="#">menu01-3</a></li>
    </ul>
  </li>
  <li><a href="#">menu02</a>
    <ul class="child">
      <li><a href="#">menu02-1</a></li>
      <li><a href="#">menu02-2</a></li>
      <li><a href="#">menu02-3</a></li>
    </ul>
  </li>
  <li><a href="#">menu03</a>
    <ul class="child">
      <li><a href="#">menu03-1</a></li>
      <li><a href="#">menu03-2</a></li>
      <li><a href="#">menu03-3</a></li>
    </ul>
  </li>
</ul>

これだけでそれなりの動きはします。

CSS

即興で書いたので整理できてません。

ul {
  list-style:none;
  &.menu {
    li {
      float:left;
      a {
        display:block;
        padding:1em;
        text-decoration:none;
        width:150px;
        text-align:center;
        background:#777;
        color:#fff;
        border:1px solid #000;
        border-left:none;
        &:hover {
          background:#eee;
          color:#000;
        }
      }
    }
  }
  &.child {
    display:none;
    li {
      float:none;
      a {
        border:none;
        background:#eee;
        color:#000;
        border-bottom:1px dotted #ccc;
        &:hover {
          background:#777;
          color:#fff;
        }
      }
    }
  }
}

コピペ用CSS

ul {
  list-style: none;
}
ul.menu li {
  float: left;
}
ul.menu li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  width: 150px;
  text-align: center;
  background: #777;
  color: #fff;
  border: 1px solid #000;
  border-left: none;
}
ul.menu li a:hover {
  background: #eee;
  color: #000;
}
ul.child {
  display: none;
}
ul.child li {
  float: none;
}
ul.child li a {
  border: none;
  background: #eee;
  color: #000;
  border-bottom: 1px dotted #ccc;
}
ul.child li a:hover {
  background: #777;
  color: #fff;
}

まとめ

CSSだけでドロップダウンメニューとかありますが、ブラウザ対応の調整が大変です。
そういう時はjQueryに頼るのもいいもんです。
要は使い所。
CSSでできたからスゴイ！じゃなくてねっ！