三級CSS下拉導航菜單

2024-09-05 12:20:33

字體：大中小

來源：轉載

供稿：網友

三級CSS下拉導航菜單

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>三級菜單</title><style type="text/css">*,body,ul,li {margin:0;padding:0;list-style: none;}body {font:12px Arial; background:#000;}a { border:none; color:#FFF; text-decoration:none;}.menu {width:980px; margin:auto; background:url("/jscss/demoimg/201003/menu.gif") repeat-x 0 0;}#menu { padding-left:210px; background:url("/jscss/demoimg/201003/menu.gif") no-repeat 0 -36px; height:36px; }	#menu li { float:left;;}	#menu li a {display:block;clear:both;font-size:14px;padding-right:14px;}	#menu li a strong {display:inline-block; height:16px;padding:15px 0 5px 15px;overflow:hidden;}	#menu li a:hover,	#menu li a.ok {background:url("/jscss/demoimg/201003/menu.gif") no-repeat right -72px; }	#menu li a:hover strong,	#menu li a.ok strong{		padding:8px 0 12px 15px; 		background:url("/jscss/demoimg/201003/menu.gif") no-repeat 0 -72px;	}	#menu li ul {display:none; width:125px;position:absolute;background-color:#D9D9D9;}	#menu li ul li { float:none;vertical-align:top; overflow:hidden;}	#menu li ul li a {		float:left;		width:115px;		_float:none;		_display:inline-block;		padding:7px 0 4px 10px;		text-align:left;		font-size:12px;		border-bottom:#000 1px solid;		overflow:hidden;	}	#menu li ul li a:hover{ background-image:none; background-color:#F00;}	#menu li ul li ul {left:125px;}	</style><script language="javascript">var Menu = ["menu"];window.onload = function(){	var li = document.getElementById(Menu).getElementsByTagName("li");	for(var i=0;i<li.length;i++){		var li_ul = li[i].getElementsByTagName("ul");		if(li_ul.length){			li[i].onmouseout = function(){				this.getElementsByTagName("a")[0].style.backgroundColor = "";				this.getElementsByTagName("ul")[0].style.display ="none";			}			if(li[i].parentNode.id!=Menu){				li[i].onmouseover= function(){					this.getElementsByTagName("a")[0].style.backgroundColor = "#F00"; 					this.getElementsByTagName("ul")[0].style.display ="block";				}			}		}	}}function ShowMenu(obj){	var li = document.getElementById(Menu).getElementsByTagName("li");	for(var c=0;c<li.length;c++){		if(li[c].parentNode.id==Menu){			li[c].getElementsByTagName("a")[0].className = "";		}	}	obj.getElementsByTagName("a")[0].className = "ok";	obj.getElementsByTagName("a")[0].style.backgroundColor = "#F00"; 	obj.getElementsByTagName("ul")[0].style.display ="block";}</script></head><body><div   id="iwvjtn8m0"   class="menu"><ul id="menu">    <li onmouseover="javascript:ShowMenu(this)"><strong>二級菜單B</strong>		<ul>			<li>二級菜單B_1				<ul>					<li>二級菜單B_1_1						<ul>							<li>二級菜單B_1_1_1</li>							<li>二級菜單B_1_1_2</li>							<li>二級菜單B_1_1_6</li>						</ul>					</li>					<li>二級菜單B_1_1						<ul>							<li>二級菜單B_1_2_1</li>							<li>二級菜單B_1_2_2</li>							<li>二級菜單B_1_2_3</li>							<li>二級菜單B_1_2_4</li>							<li>二級菜單B_1_2_5</li>						</ul>					</li>					<li>二級菜單B_1_1						<ul>							<li>二級菜單B_1_3_1</li>							<li>二級菜單B_1_3_2</li>							<li>二級菜單B_1_3_5</li>							<li>二級菜單B_1_3_6</li>						</ul>					</li>				</ul>			</li>			<li>二級菜單B_2				<ul>					<li>二級菜單B_2_1</li>					<li>二級菜單B_2_2</li>					<li>二級菜單B_2_3</li>					<li>二級菜單B_2_6</li>				</ul>			</li>		</ul>	</li>     <li onmouseover="javascript:ShowMenu(this)"><strong>三級菜單C</strong>		<ul>			<li>三級菜單C_1				<ul>					<li>三級菜單C_1_1						<ul>							<li>三級菜單C_1_1_1</li>							<li>三級菜單C_1_1_2</li>							<li>三級菜單C_1_1_5</li>						</ul>					</li>					<li>三級菜單C_1_1						<ul>							<li>三級菜單C_1_2_1</li>							<li>三級菜單C_1_2_2</li>							<li>三級菜單C_1_2_6</li>						</ul>					</li>					<li>三級菜單C_1_1						<ul>							<li>三級菜單C_1_3_1</li>							<li>三級菜單C_1_3_2</li>							<li>三級菜單C_1_3_3</li>							<li>三級菜單C_1_3_4</li>						</ul>					</li>				</ul>			</li>			<li>三級菜單C_2				<ul>					<li>三級菜單C_2_1</li>					<li>三級菜單C_2_2</li>					<li>三級菜單C_2_3</li>				</ul>			</li>		</ul>	</li></ul></div></body></html>

上一篇：類似Windows風格的導航菜單，CSS+JavaScript實現

下一篇：一級橫向滑動，二級豎向下拉綜合菜單