前回のスタイルシートで実装するプルダウンメニューより改良?したバージョンを書いてみようと思います。
前回は、横幅を指定していましたが今回はしないでいかせて頂きます。
いつもどおり、すでにあったらすみません。
[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]
プルダウン部分の幅も固定しないように%で指定したのですが、３階層目でIE6でビローンってなってしまったのであきらめましたorz =3
それでは See You Feeling