橫向三級展開的CSS菜單

2024-09-05 12:20:15

字體：大中小

來源：轉載

供稿：網友

很實用的橫向三級展開的CSS導航菜單，暖色調，用在產品類的導航比較適合，從國外IT網站摳下來的，想用的朋友再把代碼好好優化一下，現在已經很簡了。

<!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>#nav, #nav ul {float:left; padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#cea #9b7 #8a6 #deb; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}#nav li li {background:#fff;}* html #nav li {float:left;}#nav li a {display:block; color:#888; margin:0 25px 0 10px; height:20px; line-height:20px; text-decoration:none; white-space:nowrap;}#nav li:hover {position:relative; z-index:300;}#nav ul {position:absolute; left:-9999px; top:-9999px;}* html #nav, * html nav ul {width:1px;}#nav li:hover > ul {left:-15px; margin-left:100%; top:-1px;}#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}#nav li:hover > a {text-decoration:underline; color:#7b5;}#nav li:hover ul,#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%; top:-1px;}#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:#7b5;}#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 type="text/javascript">stuHover = function() {	var cssRule;	var newSelector;// http://www.codefans.net	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>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>Adjutable head</li>			<li>Fixed</li>		</ul>	</li>	<li>Films »		<ul>			<li>35mm</li>			<li>Color Print</li>			<li>Color Slide</li>		</ul>	</li>	<li>Cameras »			<ul>			<li>Compact »				<ul>				<li>Canon</li>				<li>Nikon</li>				</ul>			</li>			<li>Digital »					<ul>					<li>Canon</li>					<li>Nikon »							<ul>							<li>Lenses »								<ul>									<li>Standard</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>				</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>

上一篇：清新選項卡（一個頁面布局兩個）

下一篇：藍色清新菜單，和圖片配合的很完美