hoverすると表示されるメニュー

ホバーするとでてくるメニュー、よくありますよね。
親メニューの中に子メニューが入っていて、親メニューをhoverすると子メニューが表示されるだけです。メモメモ。
やり方だけ伝えたいので余計な装飾(css)は省いてます。あとはお好きに。

HTML.
<ul class="global_menu">
    <li><a href="#">MENU_1</a>
        <ul>
            <li><a href="">second-menu1</a></li>
            <li><a href="">second-menu2</a></li>
            <li><a href="">second-menu3</a></li>
            <li><a href="">second-menu4</a></li>
        </ul>
    </li>
    <li><a href="#">MENU_2</a>
        <ul>
            <li><a href="">second-menu1</a></li>
            <li><a href="">second-menu2</a></li>
            <li><a href="">second-menu3</a></li>
            <li><a href="">second-menu4</a></li>
        </ul>
    </li>
    <li><a href="#">MENU_3</a>
        <ul>
            <li><a href="">second-menu1</a></li>
            <li><a href="">second-menu2</a></li>
            <li><a href="">second-menu3</a></li>
            <li><a href="">second-menu4</a></li>
        </ul>
    </li>
    <li><a href="#">MENU_3</a>
        <ul>
            <li><a href="">second-menu1</a></li>
            <li><a href="">second-menu2</a></li>
            <li><a href="">second-menu3</a></li>
            <li><a href="">second-menu4</a></li>
        </ul>
    </li>
</ul>
CSS.
*{margin:0;padding:0;text-align: center;} /*単純にリセットして文字を中央寄せ*/

ul {overflow: hidden;list-style: none;} /*floatすると親要素は高さを失うので、overflow:hidden;で高さを認識させる*/
ul.global_menu > li{float: left;width:25%;} /*親メニューをfloatして横並びに*/
ul.global_menu > li ul{display: none;} /*子要素を非表示に。*/

ul.global_menu > li:hover ul{ /*親メニューをhoverしたとき、子要素を表示 セレクタの使い方注意*/
    display: block;
    background: red;
}
[紹介元] CSSタグが付けられた新着投稿 – Qiita hoverすると表示されるメニュー

関連記事