纯CSS下拉菜单代码

2024-09-05 12:20:54

字体：大中小

来源：转载

供稿：网友

超简洁但很实用的纯CSS下拉菜单代码，最多支持二级，不过对于一般性的网站，已经够用了，本代码更重要的是让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>简洁的纯CSS下拉菜单代码</title><style>#sddm{	margin: 0 auto;	padding: 0;	z-index: 30;	background-color:#F4F4F4;	width: 480px;	height:23px;}#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: 60px;	background: #5970B2;	color: #FFF;	text-align: center;	text-decoration: none}#sddm li a:hover{	background: #49A3FF}#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}</style><script type="text/javascript"></script></head><body style="text-align:center"><ul id="sddm">	<li>Home		<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">		HTML DropDown		DHTML DropDown menu		JavaScript DropDown		DropDown Menu		CSS DropDown		</div>	</li>	<li>Download		<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">		ASP Dropdown		Pulldown menu		AJAX dropdown		DIV dropdown		</div>	</li>	<li>Order		<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">		Visa Credit Card		Paypal		</div>	</li>	<li>Help		<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">		Download Help File		Read online		</div>	</li>	<li>Contact		<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">		E-mail		Submit Request Form		codefans.net		</div>	</li></ul><div style="clear:both"></div> </body></html>

上一篇：JS版网页顶部向下滑出的全国城市切换导航

下一篇：JS网页版的键位指法练习软件源代码