用CSS实现浮点导航

1. 建立一个CSS文件

#sddm
{	
	
	margin: 0 auto;
	padding: 0;
	z-index: 30;
	background-color:#ddeafb;
	width: 800px;
	height:26px;}


#sddm   li
{	
	
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold  12px arial}
	

#sddm  li   a
{	
	
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 160px;
	background: #5970B2;
	color: #FFF;
	text-align: center;
	text-decoration: none	
}





#sddm    li  a:hover
{		
	 
	 background:#7FFFD4;
}



#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #5970B2
	
}




#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #2875DE;
		font: 12px arial}

#sddm div a:hover
	{	
	
	    background: #49A3FF;
		color: #FFF}


 

 

 

在html或者JSP文件的body中加入

 

<body style="text-align:center">
<ul   id="sddm">


	<li><a   href="#" onMouseOver="mopen('m1')" onMouseOut="mclosetime()">个人资料</a>
		<div id="m1" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
	        
	         <a href="student_detail.jsp">个人信息</a> 
	         <a href="student_main.jsp">个人通知</a>
		</div>	
	</li>

	
	<li><a href="#" onMouseOver="mopen('m2')" onMouseOut="mclosetime()">论文题目</a>
		<div id="m2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
	
	    <a href="title_select.jsp">在线选题</a> 
	    <a href="student_title_detail.jsp">个人题目</a> 
	    <a href="student_teacher_detail.jsp">个人指导教师信息</a>
	
		</div>
	</li>

	
	<li><a href="#" onMouseOver="mopen('m3')"  onmouseout="mclosetime()">论文进程</a>
		<div id="m3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
	    
	         <a href="student_doc_select.jsp">编辑文档</a>                 
             <a href="student_doc_fastsave.jsp">本地上传文档</a>   
		
		</div>	
	</li>
	
	
	
	<li><a href="#" onMouseOver="mopen('m4')" onMouseOut="mclosetime()">下载帮助</a>
		<div id="m4" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
	    <a href="down_center.jsp">下载支持</a>	
		<a href="help.jsp">帮助说明</a>
		</div>
	</li>
</ul>
<div style="clear:both"></div>

</body>

 

 

你可能感兴趣的:(用CSS实现浮点导航)