CSS制作水平导航菜单效果

遗失ぜ的ァ美

CSS制作水平导航菜单效果
<script><br />
startList = function() {<br />
if (document.all&document.getElementById) {<br />

navRoot = document.getElementById("nav");<br />
for (i=0; i<navRoot.childNodes.length; i++) {<br />
node = navRoot.childNodes<i>;<br />
if (node.nodeName=="SPAN") {<br />
node.onmouseover=function() {this.className+=" over";}<br />
node.onmouseout=function() {this.className=this.className.replace(" over", "");}<br />
}<br />
}<br />
}<br />
}<br />
window.onload=startList;<br />
</script><br />
<style><br />
body {<br />
font: normal 11px verdana;<br />
}<br />
<span href="tag.php?name=div" onclick="tagshow(event)" class="t_tag">div</span>#nav{<br />
border-left: 1px solid #ccc;<br />
}<br />
span {<br />
margin: 0px;<br />
padding: 0px;<br />
list-style: none;<br />
width: 120px; /* Width of Menu Items */<br />
position: relative;<br />
border: 1px solid #ccc;<br />
border-left: 0px;<br />
}<br />
span div span {<br />
border: 1px solid #ccc;<br />
border-top: 0px;<br />
}<br />
span div {<br />
position: absolute;<br />
left: -1px;<br />
top: 24px; /* Set 1px less than menu width */<br />
display: none;<br />
}<br />
<br />
/* Styles for Menu Items */<br />
div span a {<br />
width: 100%;<br />
text-decoration: none;<br />
color: #777;<br />
background: #fff; /* IE6 Bug */<br />
padding: 5px;<br />
}<br />
<br />
div span a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */<br />
<br />
span div span a { padding: 2px 5px; } /* Sub Menu Styles */<br />
<br />
span:hover div, span.over div { display: inline; } /* The magic */<br />
</style><br />
<br />
<div id="nav"> <br />
<span><a href="http://www.dwww.cn">dwww.cn</a><br />
<div><br />
</div><br />
</span> <br />
<span><a href="#">About</a><br />
<div><br />
<span><a href="#">History</a></span> <br />
<span><a href="#">Team</a></span> <br />
<span><a href="#">Offices</a></span><br />
</div> <br />
</span> <br />
<span><a href="#">Services</a><br />
<div> <br />
<span><a href="#">Web Design</a></span> <br />
<span><a href="#">Internet Marketing</a></span> <br />
<span><a href="#">Hosting</a></span> <br />
<span><a href="#">Domain Names</a></span> <br />
<span><a href="#">Broadband</a></span><br />
</div><br />
</span> <br />
<span><a href="#">Contact Us</a><br />
<div><br />
<span><a href="#">United Kingdom</a></span> <br />
<span><a href="#">France</a></span> <br />
<span><a href="#">USA</a></span> <br />
<span><a href="#">Austraspana</a></span><br />
</div><br />
</span><br />
</div> <br />
<br />
<br />

   提示：您可以先修改部分代码再运行

dgzxg

加油！在奥斯卡上一连拿了11个奖项的好帖