首页 > 教程 > 网页教程 > 网页特效 > 导航菜单 >

CSS做的水平导航菜单效果

时间：2007-10-15 11:05 来源：设计之家作者：佚名

<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 全部选择提示：你可先修改部分代码，再按运行]

猜你感兴趣

过渡很平滑的下拉菜单代码

过渡很平滑的下拉菜单代码

2007-10-15

网站导航文字左右切换的特效

网站导航文字左右切换的特效

2007-11-11

自适应宽度的TAB滑动门标签导

自适应宽度的TAB滑动门标签导

2007-10-25

CSS竖向下拉菜单代码

CSS竖向下拉菜单代码

2007-10-15

CSS做的水平导航菜单效果

CSS做的水平导航菜单效果

2007-10-15

最新文章

网站导航文字左右切换的特效

网站导航文字左右切换的特效

2007-11-11

自适应宽度的TAB滑动门标签导航

自适应宽度的TAB滑动门标签导航

2007-10-25

CSS代码:模拟制作techweb网站导航

CSS代码:模拟制作techweb网站导航

2007-10-18

精选23种CSS导航条

精选23种CSS导航条

2007-10-15

CSS竖向下拉菜单代码

CSS竖向下拉菜单代码

2007-10-15