复制代码代码如下：
<％@page pageencoding = "utf-8"
contentType = "text/html; charset = utf-8"％>
<html>
<head>
<title> webform5 </title>
<style>/ * root = horizontal、secondary = vertical */
ul＃navmenu-h {
マージン：0;
ボーダー：0なし;
パディング：0;
幅：500px; /*for khtml*/
リストスタイル：なし;
高さ：24px;
}
ul＃navmenu-h li {
マージン：0;
ボーダー：0なし;
パディング：0;
フロート：左; /*geckoの場合*/
表示：インライン;
リストスタイル：なし;
位置：相対;
高さ：24px;
}
ul＃navmenu-h ul {
マージン：0;
ボーダー：0なし;
パディング：0;
幅：160px;
リストスタイル：なし;
表示：なし;
位置：絶対;
トップ：24px;
左：0;
}
ul＃navmenu-h ul：after /*from from from from complianceの欠如* /{
クリア：両方;
表示：ブロック;
フォント：1px/0px serif;
コンテンツ： "。";
高さ：0;
可視性：隠された;
}
ul＃navmenu-h ul li {
幅：160px;
フロート：左; /*IE 7コンプライアンスの欠如*/
ディスプレイ：ブロック！重要;
表示：インライン; /*ie*/
}
/ *ルートメニュー */
ul＃navmenu-h a {
ボーダー：1pxソリッド#fff;
国境右色：#CCC;
Border-Bottom-Color：#ccc;
パディング：0 6px;
フロート：なし！重要。 /*for opera*/
フロート：左; /*ie*/
表示：ブロック;
背景：#eee;
色：＃666;
フォント：太字10px/22px Verdana、arial、helvetica、sans-serif;
テキスト装置：なし;
高さ：自動！重要。
高さ：1％; /*ie*/
}
/ *ルートメニューホバー永続性 */
ul＃navmenu-h a：ホバー、
ul＃navmenu-h li：ホバーA、
ul＃navmenu-h li.iehover a {
背景：#ccc;
色：#fff;
}
/ * 2番目のメニュー */
ul＃navmenu-h li：Hover li a、
ul＃navmenu-h li.iehover li a {
フロート：なし;
背景：#eee;
色：＃666;
}
/ * 2番目のメニューホバー永続性 */
ul＃navmenu-h li：Hover li A：Hover、
ul＃navmenu-h li：ホバーli：ホバーA、
ul＃navmenu-h li.iehover li A：ホバー、
ul＃navmenu-h li.iehover li.iehover a {
背景：#ccc;
色：#fff;
}
/ * 3番目のメニュー */
ul＃navmenu-h li：Hover li：Hover li a、
ul＃navmenu-h li.iehover li.iehover li a {
背景：#eee;
色：＃666;
}
/ * 3番目のメニューホバー永続性 */
ul＃navmenu-h li：Hover li：Hover li A：Hover、
ul＃navmenu-h li：ホバーli：ホバーli：ホバーA、
ul＃navmenu-h li.iehover li.iehover li a：Hover、
ul＃navmenu-h li.iehover li.iehover li.iehover a {
背景：#ccc;
色：#fff;
}
/ * 4番目のメニュー */
ul＃navmenu-h li：Hover li：Hover li：Hover li a、
ul＃navmenu-h li.iehover li.iehover li.iehover li a {
背景：#eee;
色：＃666;
}
/ * 4番目のメニューホバー */
ul＃navmenu-h li：Hover li：Hover li：Hover li A：Hover、
ul＃navmenu-h li.iehover li.iehover li.iehover li a：hover {
背景：#ccc;
色：#fff;
}
ul＃navmenu-h ul ul、
ul＃navmenu-h ul ul ul {
表示：なし;
位置：絶対;
上：0;
左：160px;
}
/ *移動しないでください - ディスプレイの前に来なければなりません：geckoのブロック */
ul＃navmenu-h li：Hover ul ul、
ul＃navmenu-h li：Hover ul ul ul、
ul＃navmenu-h li.iehover ul ul、
ul＃navmenu-h li.iehover ul ul ul {
表示：なし;
}
ul＃navmenu-h li：ホバーUL、
ul＃navmenu-h ul li：Hover UL、
ul＃navmenu-h ul ul li：Hoverul、
ul＃navmenu-h li.iehover ul、
ul＃navmenu-h ul li.iehover ul、
ul＃navmenu-h ul ul li.iehover ul {
表示：ブロック;
}
</style> <スクリプト言語= "javascript">
navhover = function（）{
var lis = document.getElementById（ "navmenu-h"）。getelementsbytagname（ "li"）;
for（var i = 0; i <lis.length; i ++）{
lis [i] .onmouseover = function（）{
this.classname+= "iehover";
}
lis [i] .onmouseout = function（）{
this.classname = this.classname.replace（new regexp（ "iehover // b"）、
""）;
}
}
}
if（window.attachevent）window.attachevent（ "onload"、navhover）;
</script>
</head>
<body>
<ul id = "navmenu-h">
<li> <a href = "＃"> root nav item1 </a>
<ul>
<li> <a href = "＃"> sub nav item1 </a> </li>
<li> <a href = "＃"> sub nav item1-2 </a> </li>
</ul>
</li>
<li> <a href = "＃"> root nav item2 </a>
<ul>
<li> <a href = "＃"> sub nav item2 </a> </li>
<li> <a href = "＃"> sub nav item2-2 </a> </li>
</ul>
</li>
<li> <a href = "＃"> root nav item3 </a>
<ul>
<li> <a href = "＃"> sub nav item3 </a> </li>
<li> <a href = "＃"> sub nav item3-2 </a> </li>
</ul>
</li>
</ul>
</body>
</html>