コピペでOKサンプルはこちら

[html] <ul class="menu"> <li> <a class="init-bottom" href="#">Menu single</a> <ul> <li> <a href="#">Child Menu</a> </li> <li> <a href="#">Child Menu</a> </li> <li> <a href="#">Child Menu</a> </li> </ul> </li> <li> <a class="init-bottom" href="#">Menu multi level</a> <ul><!– 第一階層 –> <li> <a class="init-right" href="#">Child Menu</a> <ul><!– 第二階層 –> <li> <a class="init-right" href="#">Grandchild Menu</a> <ul><!– 第三階層 –> <li> <a href="#">Great-Grandchild Menu</a> </li> <li> <a href="#">Great-Grandchild Menu</a> </li> <li> <a href="#">Great-Grandchild Menu</a> </li> </ul><!– 第三階層 –> </li> <li> <a href="#">Grandchild Menu</a> </li> <li> <a href="#">Grandchild Menu</a> </li> </ul><!– 第二階層 –> </li> </ul><!– 第一階層 –> </li> </ul> [/html]

スタイルシート

[css] .sample_menu ul{ padding : 0; list-style : none; } .sample_menu .menu{ position : relative; width : 100%; height : 50px; max-width : 1000px; margin : 0 auto; } .sample_menu .menu > li{ float : left; width : 25%; /* グローバルナビ4つの場合 */ height : 50px; line-height : 50px; background : rgb(29, 33, 19); } .sample_menu .menu > li a{ display : block; color : #fff; } .sample_menu .menu > li a:hover{ color : #999; } .sample_menu .menu > li > ul{ /* 1階層 */ visibility : hidden; opacity : 0; z-index : 1; } .sample_menu .menu > li > ul > li > ul{ /* 2階層 */ visibility : hidden; opacity : 0; } .sample_menu .menu > li > ul > li > ul > li > ul{ /* 3階層 */ visibility : hidden; opacity : 0; } .sample_menu .menu > li:hover{ background: #072A24; -webkit-transition: all .5s; transition : all .5s; } .sample_menu .menu > li > ul > li{ border-top : 1px solid #111; } .sample_menu .menu > li > ul > li > ul li{ border-top : 1px solid #111; } .sample_menu .menu > li > ul > li a:hover{ background : #111; } .sample_menu .menu > li > ul > li > ul > li a:hover{ background : #2a1f1f; } .sample_menu .menu > li > ul > li > ul > li > ul > li a:hover{ background : #1d0f0f; } /* 下矢印 */ .init-bottom:after{ content : ”; display : inline-block; width : 6px; height : 6px; margin : 0 0 0 15px; border-right : 1px solid #fff; border-bottom : 1px solid #fff; -webkit-transform : rotate(45deg); -ms-transform : rotate(45deg); transform : rotate(45deg); } /* floatクリア */ .sample_menu .menu:before, .sample_menu .menu:after{ content : " "; display : table; } .sample_menu .menu:after{ clear : both; } .sample_menu .menu{ *zoom : 1; } /* 単階層 */ .sample_menu .menu > li{ position: relative; } .sample_menu .menu > li >ul{ position: absolute; top : 40px; width : 100%; background : #072A24; -webkit-transition : all .2s ease; transition : all .2s ease; } .sample_menu .menu > li:hover >ul{ top : 50px; visibility : visible; opacity : 1; } /* 多階層 ～3階層 */ .sample_menu .menu > li{ position : relative; } .sample_menu .menu > li > ul{ position : absolute; top : 40px; width : 100%; background : #072A24; -webkit-transition : all .2s ease; transition : all .2s ease; pointer-events : none; } .sample_menu .menu > li:hover > ul{ top : 50px; visibility : visible; opacity : 1; pointer-events : auto; } .sample_menu .menu > li > ul > li{ position : relative; } .sample_menu .menu > li > ul > li:hover{ background : #111; } .sample_menu .menu > li > ul > li > ul{ position : absolute; top : -1px; left : 100%; width : 100%; background : #111; -webkit-transition : all .2s ease; transition : all .2s ease; } .sample_menu .menu > li > ul > li:hover > ul{ visibility : visible; opacity : 1; } .sample_menu .menu > li > ul > li > ul > li{ position : relative; } .sample_menu .menu > li > ul > li > ul > li:hover{ background : #2a1f1f; } .sample_menu .menu > li ul > li > ul > li > ul{ position : absolute; top : -1px; left : 100%; width : 100%; background : #2a1f1f; -webkit-transition : all .2s ease; transition : all .2s ease; } .sample_menu .menu > li > ul > li > ul > li:hover > ul{ visibility : visible; opacity : 1; } .init-right:after{ content : ”; display : inline-block; width : 6px; height : 6px; margin : 0 0 0 15px; border-right : 1px solid #fff; border-top : 1px solid #fff; -webkit-transform : rotate(45deg); -ms-transform : rotate(45deg); transform : rotate(45deg); } [/css]

文字色や背景色などはお好きなように変更してください

こちらを参考にしています