スタイルシートで実装するプルダウンメニュー 最近使ってるもの

前回のスタイルシートで実装するプルダウンメニューより改良?したバージョンを書いてみようと思います。

前回は、横幅を指定していましたが今回はしないでいかせて頂きます。
いつもどおり、すでにあったらすみません。

デモ

[xhtml lang_name="true"]

[/xhtml]
[css lang_name="true"]
/*/ Page Navigation Setting /*/
ul#page_nav
{
width:100%;
min-height:37px;
font-size:107%;
background:#F0F0F0;
display:table;
}
ul#page_nav li
{
width:auto;
float:left;
display:table-cell;
}
ul#page_nav li:hover
{
background:#D1D1D1;
position:relative;
}
ul#page_nav li a
{
width:auto;
line-height:2.7;
text-decoration:none;
color:#474747;
border-right:1px solid #FFFFFF;
padding:0px 30px 0px 30px;
float:left;
}
/*/ Pulldown Setting /*/
ul#page_nav li ul
{
display:none;
}
ul#page_nav li:hover > ul
{
width:270px;
border-top:1px solid #CACACA;
display:block;
position:absolute;
top:100%;
left:0px;
z-index:3;
}
ul#page_nav li ul li
{
width:270px;
background:none;
}
ul#page_nav li ul li a
{
width:248px;
color:#474747 !important;
border:1px solid #CACACA;
border-top:none;
padding:0px 10px 0px 10px;
background:#F0F0F0;
}
ul#page_nav li ul li a:hover
{
color:#FFFFFF !important;
background:#6097D7;
}
ul#page_nav li ul li:hover ul
{
top:0px;
left:100%;
z-index:3;
}
[/css]

プルダウン部分の幅も固定しないように%で指定したのですが、3階層目でIE6でビローンってなってしまったのであきらめましたorz =3

それでは See You Feeling

This entry was posted in 未分類. Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">