JS+CSS 六级网站导航主菜单

2024-09-05 12:20:22

字体：大中小

来源：转载

供稿：网友

支持6级的JS+CSS网站导航主菜单，级级相信够大家用了，外观蓝色风格，也是使用最多的一种菜单颜色，而且菜单的兼容性非常好，支持IE6/IE7/IE8，火狐、GG浏览器等不同内核的主流浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>CSS六级导航菜单</title><style>.preload1 {background: url(/jscss/demoimg/200908/blank_over.gif);}.preload2 {background: url(/jscss/demoimg/200908/blank_overa.gif);}#nav {padding:0; margin:0; list-style:none; height:36px; background:#fff; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}#nav li.top {display:block; float:left;}#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(/jscss/demoimg/200908/blank.gif);}#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(/jscss/demoimg/200908/blank.gif) right top;}#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(/jscss/demoimg/200908/blanka.gif) no-repeat right top;}#nav li a.top_link:hover {color:#fff; background: url(/jscss/demoimg/200908/blank_over.gif) no-repeat;}#nav li a.top_link:hover span {background:url(/jscss/demoimg/200908/blank_over.gif) no-repeat right top;}#nav li a.top_link:hover span.down {background:url(/jscss/demoimg/200908/blank_overa.gif) no-repeat right top;}#nav li:hover > a.top_link {color:#fff; background: url(/jscss/demoimg/200908/blank_over.gif) no-repeat;}#nav li:hover > a.top_link span {background:url(/jscss/demoimg/200908/blank_over.gif) no-repeat right top;}#nav li:hover > a.top_link span.down {background:url(/jscss/demoimg/200908/blank_overa.gif) no-repeat right top;}#nav li:hover {position:relative; z-index:200;}#nav ul, #nav li:hover ul ul,#nav li:hover ul li:hover ul ul,#nav li:hover ul li:hover ul li:hover ul ul,#nav li:hover ul li:hover ul li:hover ul li:hover ul ul{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}#nav li:hover ul.sub{left:0; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; height:auto; z-index:300;}#nav li:hover ul.sub li{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}#nav li:hover ul.sub li a{display:block; font-size:11px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}#nav li ul.sub li a.fly{background:#fff url(/jscss/demoimg/200908/arrow.gif) 80px 7px no-repeat;}#nav li:hover ul.sub li a:hover {background:#3a93d2; color:#fff;}#nav li:hover ul.sub li a.fly:hover{background:#3a93d2 url(/jscss/demoimg/200908/arrow_over.gif) 80px 7px no-repeat; color:#fff;}#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(/jscss/demoimg/200908/arrow_over.gif) 80px 7px no-repeat; color:#fff;} #nav li:hover ul li:hover ul,#nav li:hover ul li:hover ul li:hover ul,#nav li:hover ul li:hover ul li:hover ul li:hover ul,#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}</style><script type="text/javascript">stuHover = function() {	var cssRule;	var newSelector;	for (var i = 0; i < document.styleSheets.length; i++)		for (var x = 0; x < document.styleSheets[i].rules.length ; x++)			{			cssRule = document.styleSheets[i].rules[x];			if (cssRule.selectorText.indexOf("LI:hover") != -1)			{				 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");				document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);			}		}	var getElm = document.getElementById("nav").getElementsByTagName("LI");	for (var i=0; i<getElm.length; i++) {		getElm[i].onmouseover=function() {			this.className+=" iehover";		}		getElm[i].onmouseout=function() {			this.className=this.className.replace(new RegExp(" iehover//b"), "");		}	}}if (window.attachEvent) window.attachEvent("onload", stuHover);</script></head><body><ul id="nav">	<li class="top"><span>Home</span></li>	<li class="top"><span class="down">Products</span>		<ul class="sub">			<li>Cameras					<ul>						<li>Nikon</li>						<li>Minolta</li>						<li>Pentax</li>					</ul>			</li>			<li class="mid">Lenses					<ul>						<li>Wide Angle</li>						<li>Standard</li>						<li>Telephoto</li>						<li>Zoom							<ul>								<li>35mm to 125mm</li>								<li>50mm to 250mm</li>								<li>125mm to 500mm</li>							</ul>						</li>						<li>Mirror</li>						<li>Non standard							<ul>								<li>Bayonet mount</li>								<li>Screw mount</li>							</ul>						</li>					</ul>			</li>			<li>Flash Guns</li>		</ul>	</li>	<li class="top"><span class="down">Services</span>		<ul class="sub">			<li>Printing</li>			<li>Retouching</li>		</ul>	</li>	<li class="top"><span class="down">Contacts</span>		<ul class="sub">			<li>Support</li>			<li>Sales				<ul>					<li>USA</li>					<li>Canadian</li>					<li>South American</li>					<li>European						<ul>							<li>British								<ul>									<li>London</li>									<li>Liverpool</li>									<li>Glasgow</li>									<li>Bristol										<ul>											<li>Redland</li>											<li>Hanham</li>											<li>Eastville</li>										</ul>									</li>									<li>Cardiff</li>									<li>Belfast</li>								</ul>							</li>							<li>French</li>							<li>German</li>							<li>Spanish</li>						</ul>					</li>					<li>Australian</li>					<li>Asian</li>				</ul>			</li>			<li>Buying</li>			<li>Photographers</li>			<li>Stockist</li>			<li>General</li>		</ul>	</li>	<li class="top"><span class="down">Shop</span>		<ul class="sub">			<li>Online</li>			<li>Catalogue</li>			<li>Mail Order</li>		</ul>	</li>	<li class="top"><span>Privacy Policy</span></li></ul></body></html>

上一篇：菜单背景自适应宽度的CSs实现方法示例

下一篇：Mootools做的有意思菜单