非常不错的DIV+CSS做得菜单,跟JS效果一样,特别酷

以下为详细代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HEAD><TITLE>深山行者个人网站</TITLE>

#nav {z-index:1;padding-bottom:5px;width:560px;padding-top:27px;height:30px;}
#nav ul {}
#nav ul li {}
#nav ul li {display:inline;font-weight:bold;float:left;list-style:none;text-align:center;}
#nav a:link,#nav a:visited {padding:3px 5px 0 5px;width:100px;color:#304682;text-decoration:none;}
#nav a:hover,#nav a:active {padding:3px 3px 0 5px;width:88px;color:white;background-color:#6b7798;text-decoration:none;}
#nav .list {padding:4px;font-weight:normal;line-height:20px;text-align:left;}
#nav .menu1 {width:120px;border:#99bbdd 1px solid;padding-top:6px;margin:6px 4px 0px 0px;cursor:pointer;overflow-y:hidden;filter: Alpha(opacity=90);moz-opacity: 0.7;BACKGROUND-COLOR: #f5faff;color:#304682;}

#nav .menu2 {border:#6b7798 1px solid;padding-top:5px;padding-bottom:4px;overflow-y:hidden;margin:6px 4px 0px 0px;width:120px;cursor:pointer;color: #999;height:18px;BACKGROUND-COLOR: #f5f5f5;}

-->
</style>
</HEAD>
<BODY>

<DIV id=nav>
	<UL>
	  <LI class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">深山行者个个网站 
		  <DIV class="list">
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
		  </DIV>
	  </LI>
	  
	  <LI class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">深山行者个个网站 
		  <DIV class="list">
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
		  </DIV>
	  </LI>
	  
	  <LI class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">深山行者个个网站 
		  <DIV class="list">
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
		  </DIV>
	  </LI>
	  
	  <LI class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">深山行者个个网站 
		  <DIV class="list">
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
			  <A href="#">深山行者个个网站</A><BR>
		  </DIV>
	  </LI>
	  
	</UL>
</DIV>
</BODY></HTML>

前一页:一行内文本超出指定宽度后用省略号代替

后一页:CSS Alpha透明代码相关知识学习