实用无限级菜单

tension

管理员

Rank: 9 Rank: 9 Rank: 9

1^# 大中小发表于 2008-2-5 21:46 只看该作者

实用无限级菜单

<!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> 哈喽 </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:#eca #b97 #a86 #edb; 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; top:22px;}
* 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%; top:-1px;}
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
#nav li:hover > a {text-decoration:underline; color:#b75;}
#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:#b75;}
#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>
</head>
<body>
<h1>&nbsp;</h1>
<script type="text/javascript">
stuHover = function() {
	var <span href="tag.php?name=css" onclick="tagshow(event)" class="t_tag">css</span>Rule;
	var newSelector;
	for (var i = 0; i < document.styleSheets.length; i++)
		for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
			{
			<span href="tag.php?name=css" onclick="tagshow(event)" class="t_tag">css</span>Rule = document.styleSheets[i].rules[x];
			if (<span href="tag.php?name=css" onclick="tagshow(event)" class="t_tag">css</span>Rule.selectorText.indexOf("LI:hover") != -1)
			{
				 newSelector = <span href="tag.php?name=css" onclick="tagshow(event)" class="t_tag">css</span>Rule.selectorText.replace(/LI:hover/gi, "LI.iehover");
				document.styleSheets[i].addRule(newSelector , <span href="tag.php?name=css" onclick="tagshow(event)" class="t_tag">css</span>Rule.style.<span href="tag.php?name=css" onclick="tagshow(event)" class="t_tag">css</span>Text);
			}
		}
	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>
<ul id="nav">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us &#187;</a>
	<ul>
		<li><a href="#nogo">Who we are</a></li>
		<li><a href="#nogo">What we do</a></li>
		<li><a href="#nogo">Where to find us</a></li>
	</ul>
</li>
<li><a href="#nogo">Products &#187;</a>
	<ul>
	<li><a href="#nogo">Tripods &#187;</a>
		<ul>
			<li><a href="#nogo">Monopods</a></li>
			<li><a href="#nogo">Tripods</a></li>
			<li><a href="#nogo">Adjutable head</a></li>
			<li><a href="#nogo">Fixed</a></li>
			<li><a href="#nogo">Flash mount</a></li>
			<li><a href="#nogo">Floating head</a></li>
		</ul>
	</li>
	<li><a href="#nogo">Films &#187;</a>
		<ul>
			<li><a href="#nogo">35mm</a></li>
			<li><a href="#nogo">Color Print</a></li>
			<li><a href="#nogo">Black and White</a></li>
			<li><a href="#nogo">Roll</a></li>
			<li><a href="#nogo">Color Slide</a></li>
		</ul>
	</li>
	<li><a href="#nogo">Cameras &#187;</a>
			<ul>
			<li><a href="#nogo">Compact &#187;</a>
				<ul>
				<li><a href="#nogo">Canon</a></li>
				<li><a href="#nogo">Nikon</a></li>
				<li><a href="#nogo">Minolta</a></li>
				<li><a href="#nogo">Pentax</a></li>
				</ul>
			</li>
			<li><a href="#nogo">Digital &#187;</a>
					<ul>
					<li><a href="#nogo">Canon</a></li>
					<li><a href="#nogo">Nikon &#187;</a>
							<ul>
							<li><a href="#nogo">Lenses &#187;</a>
								<ul>
									<li><a href="#nogo">Standard</a></li>
									<li><a href="#nogo">Telephoto</a></li>
									<li><a href="#nogo">Wide Angle</a></li>
									<li><a href="#nogo">Fish Eye</a></li>
									<li><a href="#nogo">Mirror</a></li>
									<li><a href="#nogo">Macro</a></li>
								</ul>
							</li>
							<li><a href="#nogo">Speedlight</a></li>
							<li><a href="#nogo">Coolpix &#187;</a>
									<ul>
									<li><a href="#nogo">Coolpix S10</a></li>
									<li><a href="#nogo">Coolpix L2</a></li>
									<li><a href="#nogo">Coolpix S500</a></li>
									<li><a href="#nogo">Coolpix P5000</a></li>
									<li><a href="#nogo">Coolpix 4600</a></li>
									<li><a href="#nogo">Coolpix S6 Silver</a></li>
									</ul>
							</li>
							<li><a href="#nogo">D200</a></li>
							<li><a href="#nogo">D80</a></li>
							</ul>
					</li>
					<li><a href="#nogo">Minolta</a></li>
					<li><a href="#nogo">Pentax</a></li>
					</ul>
			</li>
			<li><a href="#nogo">SLR &#187;</a>
				<ul>
				<li><a href="#nogo">Canon</a></li>
				<li><a href="#nogo">Nikon</a></li>
				<li><a href="#nogo">Minolta</a></li>
				<li><a href="#nogo">Pentax</a></li>
				<li><a href="#nogo">Panasonic</a></li>
				</ul>
			</li>
			</ul>
		</li>
	<li><a href="#nogo">Flash</a></li>
	<li><a href="#nogo">Video</a></li>
	</ul>
	</li>
<li><a href="#nogo">FAQs &#187;</a>
	<ul>
		<li><a href="#nogo">Cameras</a></li>
		<li><a href="#nogo">Film types</a></li>
		<li><a href="#nogo">Digital Photography</a></li>
	</ul>
</li>
<li><a href="#nogo">Privacy &#187;</a>
	<ul>
		<li><a href="#nogo">Privacy Policy</a></li>
		<li><a href="#nogo">Privacy Statement</a></li>
	</ul>
</li>
<li><a href="#nogo">Contact us</a></li>
</ul>
<p>&nbsp;</p>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

‹‹ 上一主题 | 下一主题 ››

393张高清晰web2.0站点截图	425款精品毛笔墨迹+38款墨迹底纹..	10位Master级别的Photoshop高手	绝对漂亮的笔刷
Soul 近期新作品欣赏..	熟女养成日志—长草	魔幻抽象/吸血鬼传说！！	photoshop仿CG滤镜