很獨(dú)特的純CSS二級(jí)下拉菜單

2024-09-05 12:19:14

字體：大中小

供稿：網(wǎng)友

配色很舒服的純CSS二級(jí)下拉菜單，沒(méi)有用到JS，全部是CSS代碼，拷貝即可使用，你可以根據(jù)自己的需要升級(jí)改造，還是很值得借鑒的

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS下拉菜單</title><style>body{	background-color:white;	font-size:12px;	font-family:Arial, Helvetica, sans-serif;	margin:0px;	padding:0px;	color:white;}ul,li{	margin:0px;	padding:0px;}li{	display:inline;	list-style:none;	list-style-position:outside;	text-align:center;	font-weight:bold;	float:left;}a:link{	color:#336601;	text-decoration:none;	float:left;	width:100px;	padding:3px 5px 0px 5px;}a:visited{	color:#336601;	text-decoration:none;	float:left;	padding:3px 5px 0px 5px;	width:100px;}a:hover{	color:white;	float:left;	padding:3px 3px 0px 20px;	width:88px;	text-decoration:none;	background-color:#539D26;}a:active{	color:white;	float:left;	padding:3px 3px 0px 20px;	width:88px;	text-decoration:none;	background-color:#BD06B4;}#nav{	width:600px;	height:30px;	border-bottom:0px;	padding:0px 5px;	position:absolute;	z-index:1;	left: 198px;	top: 25px;}.list{	line-height:20px;	text-align:left;	padding:4px;	font-weight:normal;}.menu1{	width:120px;	height:auto;	margin:6px 4px 0px 0px;	border:1px solid #9CDD75;	background-color:#F1FBEC;	color:#336601;	padding:6px 0px 0px 0px;	cursor:hand;	overflow-y:hidden;	filter:Alpha(opacity=70);	-moz-opacity:0.7;}.menu2{	width:120px;	height:18px;	margin:6px 4px 0px 0px;	background-color:#F5F5F5;	color:#999999;	border:1px solid #EEE8DD;	padding:6px 0px 0px 0px;	overflow-y:hidden;	cursor:hand;}</style></head><body><div   class="iwvjtn8m0"   id="nav">	<ul>	<li id="iwvjtn8m0"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">網(wǎng)站首頁(yè)	<div   id="iwvjtn8m0"   class="list">        我的博客<br />        我的日志<br />        我的音樂(lè)<br />	</div>	</li>	<li id="iwvjtn8m0"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社區(qū)圈子	<div   id="iwvjtn8m0"   class="list">	.NET圈子<br />        PHP圈子<br />        ASP圈子<br />        JAVA圈子<br />	</div>	</li>	<li id="iwvjtn8m0"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">論壇導(dǎo)航	<div   id="iwvjtn8m0"   class="list">		論壇首頁(yè)<br />        技術(shù)論壇<br />        圖片論壇<br />	</div>	</li>	<li id="iwvjtn8m0"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">賬戶(hù)管理	<div   id="iwvjtn8m0"   class="list">        我的帳號(hào)<br />        余額轉(zhuǎn)移<br />        我的地盤(pán)<br />	</div>	</li>	</ul></div></body></html>

上一篇：純CSS打造中英文雙語(yǔ)導(dǎo)航菜單

下一篇：從頁(yè)面左側(cè)滑出的導(dǎo)航菜單