用CSS实现浮点导航

最新推荐文章于 2022-06-22 20:56:40 发布

不争聊技术

最新推荐文章于 2022-06-22 20:56:40 发布

阅读量1.2k

点赞数

分类专栏： web技术文章标签： css div 文档 border jsp html

本文链接：https://blog.csdn.net/love_Ubuntu/article/details/6818269

版权

web技术专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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')"  οnmοuseοut="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>