中文(繁体)
<head> <script> startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); } for (i=0; i<navRoot.childNodes.length; i++) { 節點 = navRoot.childNodes[ i ]; if (node.nodeName=="LI") { node.onmouseover=function() {this.className+=" over";} node.onmouseout=function() {this.className=this.className.replace(" over" , "");} } } } } window.onload=startList; </script> <style> body { 字型：正常 11px verdana; } ul { 邊距：0；填充：0；列表樣式：無；寬度：150px； /* 選單項目的寬度 */ border-bottom: 1pxsolid #ccc; } ul li { 位置：相對； } li ul { 位置：絕對；左：149 像素； /* 設定比選單寬度小 1px */ top: 0;顯示：無； } /* 選單項目樣式 */ ul li a { display: block;文字裝飾：無；顏色：#777；背景：#fff； /* IE6 錯誤 */ padding: 5px;邊框：1px實心#ccc；邊框底部：0； } /* 修復 IE。從 IE Mac 隱藏 */ * html ul li { float: left;高度：1%； } * html ul li a { 高度: 1%; } /* 結束 */ ul li a:hover { color: #E2144A;背景：#f9f9f9； } /* 懸停樣式 */ li ul li a { padding: 2px 5px; } /* 子選單樣式 */ li:hover ul, li.over ul { display: block; } /* 魔法 */ </style> </head> <body> <ul id="nav"> <li><a href="#">Home</a></li> <li>< 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> < 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> <ul> <li><a href="#">英國</a> </li > <li><a href="#">法國</a></li> <li><a href="#">美國</a></li> <li><a href ="# ">澳洲</a></li> </ul> </li> </ul> </body>
