JavaScriptは使用せず、CSSのみで展開時にちょっとしたアニメーションも加えたシンプルなドロップダウンメニューのサンプルです。
最近ではスマートフォンやタブレットに対応させたりレスポンシブ対応したりで、クリック時にも対応とかウィンドウサイズによって見栄えを大きく変えるといったものが多いとは思いますが、こちらは主にPCで使用するような単純にhoverで展開されるタイプのものになります。

はじめに

以下で紹介しているドロップダウンメニューは、全て下記のようなHTMLとベースとなるCSSが指定してあります。

<ul>
  <li><a href="#">nav</a></li>
  <li>
    <a href="#">nav</a>
    <ul>
      <li><a href="#">sub nav</a></li>
      <li><a href="#">sub nav</a></li>
      <li><a href="#">sub nav</a></li>
    </ul>
  </li>
  <li>
    <a href="#">nav</a>
    <ul>
      <li><a href="#">sub nav</a></li>
      <li>
        <a href="#">sub nav</a>
        <ul>
          <li><a href="#">child</a></li>
          <li><a href="#">child</a></li>
          <li><a href="#">child</a></li>
        </ul>
      </li>
      <li>
        <a href="#">sub nav</a>
        <ul>
          <li><a href="#">child</a></li>
          <li><a href="#">child</a></li>
          <li><a href="#">child</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">nav</a></li>
  <li><a href="#">nav</a></li>
</ul>
nav ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul::after {
  display: block;
  clear: both;
  content: '';
}
nav ul li {
  position: relative;
  float: left;
  border: 2px solid #fff;
}
nav ul li:not(:first-child) {
  border-left: none;
}
nav ul li:hover {
  background-color: rgba(255,255,255,.3);
}
nav ul li a {
  display: inline-block;
  padding: 1em 4em;
  color: #fff;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
nav ul ul {
  position: absolute;
  top: 100%;
  left: -2px;
}
nav ul ul li {
  float: none;
  margin: 0;
}
nav ul ul li:not(:first-child) {
  border: 2px solid #fff;
  border-top: none;
}
nav ul ul ul {
  position: absolute;
  top: -2px;
  left: 100%;
}

また、ここでは実装のコードのみ紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。

アニメーションなし

子や孫のナビゲーションがある場合に親となるナビゲーションにhoverすると、特にアニメーションなどもなく単純にパッと表示される動きです。
実装にはベースのCSSに加えて下記を記述し、実際の動きは「DEMO #1」で確認できます。

ul ul {
  display: none;
}
ul li:hover > ul {
  display: block;
}

フェード表示

子や孫のナビゲーションがある場合に親となるナビゲーションにhoverすると、フェード表示で子や孫のナビゲーションが表示される動きで、具体的にはopacityとtransitionを使用します。
実装にはベースのCSSに加えて下記を記述し、実際の動きは「DEMO #2」で確認できます。

ul ul {
  visibility: hidden;
  opacity: 0;
  transition: .2s ease-in-out;
}
ul li:hover > ul {
  visibility: visible;
  opacity: 1;
}

上からフェード表示

先ほどのフェード表示で子や孫のナビゲーションが表示される動きにtransform: translateY()を組み合わせることで、上から降りてきながらフェード表示されるといった見せ方にすることができます。
実装にはベースのCSSに加えて下記を記述し、実際の動きは「DEMO #3」で確認できます。

ul ul {
  visibility: hidden;
  opacity: 0;
  transition: .2s ease-in-out;
  transform: translateY(-20px);
}
ul li:hover > ul {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

下から表示 × 横から表示

こちらは先ほどとは逆に子は下からフェード表示される動きを実装し、さらに孫に関しては横からフェード表示されるようにしたもので、transform: translateY()とtransform: translateX()をそれぞれ使用します。
実装にはベースのCSSに加えて下記を記述し、実際の動きは「DEMO #4」で確認できます。

ul ul {
  visibility: hidden;
  opacity: 0;
  transition: .2s ease-in-out;
  transform: translateY(10px);
}
ul ul ul {
  transform: translateX(-20px) translateY(0);
}
ul li:hover > ul {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
ul ul li:hover > ul {
  transform: translateX(0) translateY(0);
}

展開される

最後はデモを見てもらった方がどのような動きなのかわかりやすいと思いますが、子は表示する際に奥から手前に展開されるような動きを、孫には左から展開される感じの動きを設定してみたものです。
実装にはベースのCSSに加えて下記を記述し、実際の動きは「DEMO #5」で確認できます。

.ul li {
  perspective: 300px;
}
.ul ul {
  visibility: hidden;
  opacity: 0;
  transition: .3s ease-in-out;
  transform: rotateX(-90deg) rotateY(0);
  transform-origin: 0 0;
}
.ul ul li {
  perspective: 1500px;
}
.ul ul ul {
  transform: rotateX(0) rotateY(-90deg);
}
.ul li:hover > ul {
  visibility: visible;
  opacity: 1;
  transform: rotateX(0) rotateY(0);
}