代码简介:总体不错,很简约的风格。
代码内容:
<html> <head> <title>JS+CSS实现非常棒的简约风格下拉菜单_网页代码站(www.webdm.cn)</title> <script> startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="SPAN") { node.onmouseover=function() {this.className+=" over";} node.onmouseout=function() {this.className=this.className.replace(" over", "");} } } } } window.onload=startList; </script> <style> body { font: normal 11px verdana; } div#nav{ border-left: 1px solid #ccc; } span { margin: 0px; padding: 0px; list-style: none; 120px; /* Width of Menu Items */ position: relative; border: 1px solid #ccc; border-left: 0px; } span div span { border: 1px solid #ccc; border-top: 0px; } span div { position: absolute; left: -1px; top: 24px; /* Set 1px less than menu width */ display: none; } /* Styles for Menu Items */ div span a { 100%; text-decoration: none; color: #777; background: #fff; /* IE6 Bug */ padding: 5px; } div span a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */ span div span a { padding: 2px 5px; } /* Sub Menu Styles */ span:hover div, span.over div { display: inline; } /* The magic */ </style> </head> <body> <div id="nav"> <span><a href="#">Home</a> <div> </div> </span> <span><a href="#">About</a> <div> <span><a href="#">History</a></span> <span><a href="#">Team</a></span> <span><a href="#">Offices</a></span> </div> </span> <span><a href="#">Services</a> <div> <span><a href="#">Web Design</a></span> <span><a href="#">Internet Marketing</a></span> <span><a href="#">Hosting</a></span> <span><a href="#">Domain Names</a></span> <span><a href="#">Broadband</a></span> </div> </span> <span><a href="#">Contact Us</a> <div> <span><a href="#">United Kingdom</a></span> <span><a href="#">France</a></span> <span><a href="#">USA</a></span> <span><a href="#">Austraspana</a></span> </div> </span> </div> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/ceebd815-9dec-4713-9ec8-163cb7bebe2b.html