中文(简体)
<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>
