ドロップダウンメニュー（プルダウンメニュー）をHTMLとCSSだけで簡単に作る方法

ブログ記事が増えてくるとサイトに訪れたユーザーがどの記事にも辿り着きやすいよう工夫が必要になってきます。その方法の一つとして、マウスカーソルを合わせることで複数のメニュー項目を表示させるドロップダウンメニュー（プルダウンメニュー）の作り方を解説します。HTMLとCSSだけで簡単に実装可能です。

※この記事ではHTMLとCSSでドロップダウンメニュー（プルダウンメニュー）を実装する方法を記載しています。より自由度の高いjQueryを使った実装方法は下記の記事をご参照ください。
【スマートフォン対応】アコーディオンメニューをjQueryで実装する方法

HTMLで階層構造を作る

ドロップダウンメニュー（プルダウンメニュー）を作るにはまず階層構造のあるメニューを用意する必要があります。

いくつか方法はありますが、メニュー項目であればリストタグを使った方法が最も一般的でしょう。

<ul class="original-menu">
    <li><a href="#">親項目1</a>
        <ul class="menu-child">
            <li><a href="#">子項目1</a></li>
            <li><a href="#">子項目2</a></li>
            <li><a href="#">子項目3</a></li>
        </ul>
    </li>
    <li><a href="#">親項目2</a>
        <ul class="menu-child">
            <li><a href="#">子項目1</a></li>
            <li><a href="#">子項目2</a></li>
            <li><a href="#">子項目3</a></li>
        </ul>
    </li>
</ul>

このように複数のメニュー項目を有するメニューブロックをメニュー名の子要素として定義します。

CSSで装飾する

あとはCSSで上記のソースを装飾しましょう。

.menu-child {
    display: none;
}
.original-menu li:hover ul {
    display: block;
}

要は「通常時は非表示にし、メニュー名にマウスカーソルを合わせた時にメニュー項目群を表示」させるだけです。簡単にドロップダウンメニュー（プルダウンメニュー）ができました。

これだけではわかりづらいですし寂しいので多少デザインを整えましょう。

/* メインメニューの項目（メニュー名） */
.original-menu li {
    width: 150px; /* 幅を指定 */
    list-style: none; /* リストの記号 noneはなし、discは黒丸、circleは白丸 */
    position: relative; /* サブメニュー表示の基準位置にするため相対位置にする */
    cursor: pointer; /* マウスオーバーしたときにカーソルを変更 */
    display: inline-block; /* 横並びに配置 */
}
/* 親項目のリンク */
.original-menu a {
    line-height: 30px; /* 高さ */
    text-align: center; /* 文字列を中央寄せにする */
    text-decoration: none; /* リンクの下線を消す */
    font-weight: bold; /* 太字にする */
    display: block; /* リンクを親項目と同じ大きさにしてクリックしやすくする */
}
/* サブメニュー */
.menu-child {
    position: absolute; /* 絶対配置にする */
}
/* 子項目 */
.menu-child li {
    width: 150px; /* 子項目の横幅 */
    border-bottom: 0.5px solid #ddd; /* 下線を引く */
}
/* 子項目のリンク */
.menu-child a {
    line-height: 20px; /* 高さ */
    text-align: left; /* 文字列を左寄せにする */
    padding-left: 25px; /* 文字列前方の余白 */
    font-weight: normal; * 太字にしない */
}

最低限この程度でしょうか。

あとは設置するサイトや場所にもよりますのでお好みでデザインを整えましょう。