複製代碼代碼如下：
<％@page cagecoding =“ utf-8”
contentType =“ text/html; charset = utf-8”％>
<html>
<頭>
<title> WebForm5 </title>
<樣式>/ * root =水平，次級=垂直 */
ul＃navmenu-h {
保證金：0;
邊界：0無；
填充：0;
寬度：500px; /*對於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： /*從IE 7開始缺乏合規性* /{
清晰：兩者;
顯示：塊;
字體：1PX/0PX Serif;
內容： ”。”;
身高：0;
可見性：隱藏；
}
ul＃navmenu-h ul li {
寬度：160px;
浮子：左； /*對於7缺乏合規性*/
顯示：塊！重要；
顯示：內聯； /*對於IE*/
}
/ *根菜單 */
ul＃navmenu-h a {
邊界：1PX實心#FFF;
邊境權利彩色：#ccc;
邊界底彩：#ccc;
填充：0 6px;
float：沒有！重要； /*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;
}
/ *第二菜單 */
ul＃navmenu-h li：懸停
ul＃navmenu-h li.iehover li a {
浮點：無；
背景：#eee;
顏色：＃666;
}
/ *第二菜單懸停持久性 */
UL＃NAVMENU-H LI：HOVER LI A：懸停
Ul＃Navmenu-H Li：Hover Li：Hover A，
ul＃navmenu-h li.iehover li a：懸停
ul＃navmenu-h li.iehover li.iehover a {
背景：#ccc;
顏色：#fff;
}
/ *第三菜單 */
UL＃NAVMENU-H LI：Hover Li：Hover Li A，
ul＃navmenu-h li.iehover li.iehover li a {
背景：#eee;
顏色：＃666;
}
/ *第三菜單懸停持久性 */
UL＃NAVMENU-H LI：Hover Li：Hover Li A：懸停
UL＃NAVMENU-H LI：Hover Li：Hover Li：Hover A，
ul＃navmenu-h li.iehover li.iehover li a：盤旋，
ul＃navmenu-h li.iehover li.iehover li.iehover a {
背景：#ccc;
顏色：#fff;
}
/ *第四菜單 */
UL＃NAVMENU-H LI：Hover Li：Hover Li：Hover Li A，
ul＃navmenu-h li.iehover li.iehover li.iehover li a {
背景：#eee;
顏色：＃666;
}
/ *第四菜單懸停 */
UL＃NAVMENU-H LI：Hover Li：Hover Li：Hover Li A：Hover，
ul＃navmenu-h li.iehover li.iehover li.iehover li a：徘徊{
背景：#ccc;
顏色：#fff;
}
ul＃navmenu-h ul，
ul＃navmenu-h ul ul ul {
顯示：無；
位置：絕對；
頂部：0;
左：160px;
}
/ *請勿移動 - 必須在顯示之前：壁虎塊 */
ul＃navmenu-h li：懸停UL，
UL＃NAVMENU-H LI：HOVER UL UL，
ul＃navmenu-h li.iehover ul ul，
ul＃navmenu-h li.iehover ul ul ul {
顯示：無；
}
UL＃NAVMENU-H LI：HOVER UL，
UL＃NAVMENU-H UL LI：HOVER UL，
UL＃NAVMENU-HUL UL LI：HOVER UL，
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>
<身體>
<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>