CSS做的水平导航菜单效果

<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;width: 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 {width: 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><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>
    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]