水平导航菜单代码,Css代码库,德仔网

代码语言

代码分类

【Css】水平导航菜单

作者:Dezai.CN / 发布于2013/9/25/ 725


	<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>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　水平导航菜单　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)