IE6、7にも対応したCSSだけのかっこいいナビゲーション（SEOにもバッチリ使える）

かなりの格闘でした。
よく言う「CSSにはまる」ってやつです。
一体、何時間闘っていたんだろう・・・。

表題にもある通り、IE6と7でも正常に動き、
オンマウスでドロップダウンリストが出てくる仕組みです。
でも2階層（親、子）までですが。

頑張ってやっとできたソースは以下の通りです。

ソースは以下のCSSとHTMLとjavascriptで構成されています。
表題にはCSSだけと書いてありますが、IE6対策のためのスクリプトが書いて有ります。
ぶっちゃけ私のスキルでは何が書いてあるのかよくわからなかったのですが、
ソースにはきちんと内部リンクが認識出来るので、SEO的にもバッチリなはずです！
記述をコピーして任意のファイル名でアップするのが良いと思います。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝CSS＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

#toc_container{
width: 800px;
background-color:#fff;
font-family: "メイリオ","ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
#toc_container ul,#toc_container li{
list-style:none;
margin:0;
padding:0;
}
#root_toc li
{
width: 113px;
}
#root_toc li a
{
width: 113px;
}

#root_toc li{
float:left; /* 縦にする場合はこの指定は不要 */
border-right: 1px solid #00008B;
}

#root_toc li.plist ul{
display:none;
position:absolute;
font-size: 11px;
}

#root_toc li.plist:hover > a
{
background-color:#f60;
}
#root_toc li.plist:hover ul{
display: block;
/* 縦にする場合は次の指定を使う
margin-left:90px;
margin-top:-25px;
*/
}
#root_toc li.plist li{
float:none;
display:list-item;
}
#root_toc li a{
display: block;
/*boxの扱いの差が出るのでpaddingは使わない*/
/*text-indent:0.3em;*/
line-height:33px;
background: url(任意の画像.gif) no-repeat left top;
color: #00008B;
text-decoration:none;
text-align: center;
}
#root_toc li a:hover
{
color: #00008B;
background: url(任意の画像.gif) no-repeat right bottom;
}
/*以下の記述がないとIE6で消えることがありました*/
#root_toc:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#root_toc { display: inline-block; }

/* Hides from IE-mac \*/
*html #menu { height: 1%; }
#root_toc { display: block; }
/* End hide from IE-mac */


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝HTML＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
※注意：タグをはさむ記号＜＞が全角になってます。半角へ変換してから使ってください。

＜div id="toc_container"＞
＜ul id="root_toc"＞
＜li＞＜a href="#"＞ああああああ＜/a＞＜/li＞
＜li＞＜a href="#"＞かかかかかか＜/a＞＜/li＞
＜li class="plist"＞＜a href="#"＞ささささささ
＜/a＞
＜ul＞
＜li＞＜a href="#"＞ささささささ
＜/a＞＜/li＞
＜li＞＜a href="#"＞しししししし
＜/a＞＜/li＞
＜li＞＜a href="#"＞すすすすすす
＜/a＞＜/li＞
＜li＞＜a href="#"＞せせせせせせ
＜/a＞＜/li＞
＜li＞＜a href="#"＞そそそそそそ
＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜li＞＜a href="#"＞たたたたたた＜/a＞＜/li＞
＜li class="plist"＞＜a href="#"＞なななななな
＜/a＞
＜ul＞
＜li＞＜a href="#"＞なななななな
＜/a＞＜/li＞
＜li＞＜a href="#"＞にににににに
＜/a＞＜/li＞
＜li＞＜a href="#"＞ぬぬぬぬぬぬ
＜/a＞＜/li＞
＜/ul＞＜/li＞
＜li＞＜a href="#"＞はははははは＜/a＞＜/li＞
＜li class="plist"＞＜a href="#"＞まままままま
＜/a＞
＜ul＞
＜li＞＜a href="#"＞まままままま
＜/a＞＜/li＞
＜li＞＜a href="#"＞みみみみみみ
＜/a＞＜/li＞
＜/ul＞＜/li＞
＜/ul＞
＜/div＞
＜script type="text/javascript" src="/javascript.js"＞＜/script＞


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝javascript＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
※注意：タグをはさむ記号＜＞が全角になってます。半角へ変換してから使ってください。

//window.onload = function(){//＜head＞にスクリプトを配置する場合は行先頭のコメントアウトを外す
if(document.getElementById && document.all && !navigator.userAgent.match(/Opera/)){
var obj = document.getElementById("root_toc");
for(var i=0;i＜obj.childNodes.length;i++)
{
if(obj.childNodes[i].className=="plist")
{
obj.childNodes[i].onmouseover = function(){pull(this)};
obj.childNodes[i].onmouseout = function(){pull(this)};
}
}
}
//}//＜head＞にスクリプトを配置する場合は行先頭のコメントアウトを外す

function pull(obj){
for(var i=0;i＜obj.childNodes.length;i++)
if(obj.childNodes[i].nodeName.toUpperCase()=="UL")
obj.childNodes[i].style.display=obj.childNodes[i].style.display=="block"?"none":"block";
}



＃がっつり参考にさせて頂いたサイト様

http://blog.faro.main.jp/?eid=591449