向上展開的多級CSS菜單

2024-09-05 12:20:09

字體：大中小

來源：轉載

供稿：網友

挺不錯的向上展開的多級菜單，大致試了一下，可以支持6級，太酷了，用作產品導航應該很爽。

<!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=gb2312" /><title>向上展開的多級CSS菜單</title><style>#nav,#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#ace #79b #68a #bde; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}#nav {height:25px; padding:0;}#nav li {float:left;}#nav li li {float:none; background:#fff;}* html #nav li li {float:left;}#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}#nav li li a {height:20px; line-height:20px; float:none;}#nav li:hover {position:relative; z-index:300;}#nav li:hover ul {left:0; bottom:21px; top:auto;}* html #nav li:hover ul {left:10px;}#nav ul {position:absolute; left:-9999px; top:-9999px;}* html #nav ul {width:1px;}#nav li:hover li:hover > ul {left:-15px; margin-left:100%; bottom:-7px; top:auto;}#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}#nav li:hover > a {text-decoration:underline; color:#57b;}#nav li:hover li:hover ul,#nav li:hover li:hover li:hover ul,#nav li:hover li:hover li:hover li:hover ul,#nav li:hover li:hover li:hover li:hover li:hover ul{left:-15px; margin-left:100%; bottom:-7px; top:auto;}#nav li:hover ul ul,#nav li:hover li:hover ul ul,#nav li:hover li:hover li:hover ul ul,#nav li:hover li:hover li:hover li:hover ul ul{position:absolute; left:-9999px; top:-9999px;}#nav li:hover a,#nav li:hover li:hover a,#nav li:hover li:hover li:hover a,#nav li:hover li:hover li:hover li:hover a,#nav li:hover li:hover li:hover li:hover li:hover a,#nav li:hover li:hover li:hover li:hover li:hover li:hover a{text-decoration:underline; color:#57b;}#nav li:hover li a,#nav li:hover li:hover li a,#nav li:hover li:hover li:hover li a,#nav li:hover li:hover li:hover li:hover li a,#nav li:hover li:hover li:hover li:hover li:hover li a{text-decoration:none; color:#888;}</style><script>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><h2>Skeleton pull up menu</h2><ul id="nav"><li>Home</li><li>About us »	<ul>		<li>Who we are</li>		<li>What we do</li>	</ul></li><li>Products »	<ul>	<li>Tripods »		<ul>			<li>Monopods</li>			<li>Tripods</li>			<li>Adjutable head</li>		</ul>	</li>	<li>Films »		<ul>			<li>35mm</li>			<li>Color Print</li>		</ul>	</li>	<li>Cameras »			<ul>			<li>Compact »				<ul>				<li>Canon</li>				<li>Nikon</li>				<li>Pentax</li>				</ul>			</li>			<li>Digital »					<ul>					<li>Canon</li>					<li>Nikon »							<ul>							<li>Lenses »								<ul>									<li>Mirror</li>									<li>Macro</li>								</ul>							</li>							<li>Speedlight</li>							<li>Coolpix »									<ul>									<li>Coolpix S10</li>									<li>Coolpix S500</li>									</ul>							</li>							<li>D200</li>							<li>D80</li>							</ul>					</li>					<li>Minolta</li>					<li>Pentax</li>					</ul>			</li>			<li>SLR »				<ul>				<li>Canon</li>				<li>Nikon</li>				<li>Minolta</li>				</ul>			</li>			</ul>	  </li>	<li>Flash</li>	<li>Video</li>	</ul>  </li><li>FAQs »	<ul>		<li>Cameras</li>		<li>Film types</li>	</ul></li><li>Privacy »	<ul>		<li>Privacy Policy</li>		<li>Privacy Statement</li>	</ul></li><li>Contact us</li></ul></body></html>

上一篇：左側動畫展開的輔助菜單

下一篇：CSS無序列表創建的標準菜單