CSSを記述してレイアウトを作ります。。→DEMO
↓ｃｓｓ用コード
/*初期化*/
*{
margin: 0;
padding: 0;
list-style-type: none;
}
/*メニューボタン*/
.main li{
float:left;
width: 150px;
height: 38px;
border: none;
box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
border-radius: 6px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.68, #0018ab), color-stop(0.35, #005aff));
background: -webkit-linear-gradient(top, #005aff 35%, #0018ab 68%);
background: -moz-linear-gradient(top, #005aff 35%, #0018ab 68%);
background: -o-linear-gradient(top, #005aff 35%, #0018ab 68%);
background: -ms-linear-gradient(top, #005aff 35%, #0018ab 68%);
background: linear-gradient(to bottom, #005aff 35%, #0018ab 68%);
position: relative;
}
/*メニューボタンテキストリンク*/
.main li a{
display:block;
width: 100%;
height: 100%;
line-height: 30px;
font-weight: bold;
text-indent: 30px;
text-decoration: none;
font-size: 14px;
color: #d3d3d5;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);
letter-spacing: 0;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
position: relative;
}
.main li a:hover{
color: #d3d3d5;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
border-radius: 6px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #70b6f2), color-stop(0.50, #54a3ee), color-stop(0.50, #3690f0), color-stop(1.00, #1a62db));
background: -webkit-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
background: -moz-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
background: -o-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
background: -ms-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
background: linear-gradient(to bottom, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
}
/*サブメニュー*/
ul.sub{
display: none;
}
/*クリアフィックス*/
ul.main:after{
content:'.';
display: block;
clear:both;
height: 0;
visibility: hidden;
}
/*ie7用*/
ul.main{
zoom:1;
}
ポイント！→ メニューの横並びとクリアフィックス
※今回はCSS３でボタンデザインをつくっていますが、画像などを利用してもOK
jQueryスクリプトを記述します→DEMO
↓js用コード
$(function(){
$("ul.main li")
.hover(
//hoverメソッドの第１引数
function(){
//マウスを重ねた時のメソッド
//セレクタ内の:not(:animated)はanimate停止中の要素のみ取り出すセレクタです。（マウスが乗っているアニメーションをしていないul要素）として読めます。
//$()内の第２引数thisは、"ul.main li"のことです。
//第1引数の範囲を第２引数で絞り込んでいます。
//メソッドは、スライドダウンをさせるメソッドです。
//>をつけることによってulが子要素で存在するときのみとしてセレクタを作っています。
$(">ul:not(:animated)",this).slideDown("fast");
},
//hoverの第２引数
function(){
//マウスをはずした時に発生するイベント
$(">ul",this).slideUp("fast");
}
)
});
ポイント！→ 今回のきっかけはhover()というマウスが上に乗ったときと外れた時に動作するメソッドを使用しています。詳しくは、スクリプト内のコメントを参照してください。
あとはお好みに合わせて、リストの入れ子を作って完成です！
入れ子の入れ子の作成時のCSSは↓
/*サブメニューのサブメニュー用*/
div#menu_wrap ul.sub li ul.sub{
position: absolute;
left:150px;
top:0;
}
/*サブメニューのボタン*/
div#menu_wrap ul.sun li{
float: none;
}
/*ie7対策*/
*+html div#menu_wrap ul.mail li{
display: inline;
zoom:1;
}
*+html div#menu_wrap ul.sub{
zoom:1;
position: relative;
}
入れ子の入れ子の出現場所を指定することがポイントです！
→→→完成ファイル→→.zip DL