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

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

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

デモ

XHTML

<ul id="page_nav">
	<li><a title="ホーム" href="http://www.webnist.net/">ホーム</a></li>
	<li><a title="All Post" href="http://www.webnist.net/page/1">All Post</a></li>
	<li><a title="Web標準" href="http://www.webnist.net/category/web_standard/">Web標準</a>
<ul>
	<li><a title="CSS" href="http://www.webnist.net/category/web_standard/css/">CSS</a></li>
	<li><a title="Web制作" href="http://www.webnist.net/category/web_production/">Web制作</a></li>
	<li><a title="Web制作で覚えた英語" href="http://www.webnist.net/category/web_production/web_de_english/">Web制作で覚えた英語</a></li>
</ul>
</li>
	<li><a title="WordPress" href="http://www.webnist.net/category/wordpress/">WordPress</a>
<ul>
	<li><a title="WordPressテーマ" href="http://www.webnist.net/category/wordpress/wp_theme/">WordPressテーマ</a></li>
</ul>
</li>
	<li><a title="日記" href="http://www.webnist.net/category/diary/">日記</a></li>
	<li><a title="その他" href="http://www.webnist.net/category/others/">その他</a></li>
</ul>

CSS

/*/ 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;
}

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

それでは See You Feeling