很獨特的純CSS二級下拉菜單

2024-09-05 12:19:14

字體：大中小

來源：轉載

供稿：網友

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

<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="is0yyao"   id="nav">	<ul>	<li id="o6k6ok6"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">網站首頁	<div   id="agcaqic"   class="list">        我的博客<br />        我的日志<br />        我的音樂<br />	</div>	</li>	<li id="oauo6o6"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社區圈子	<div   id="qqicuwq"   class="list">	.NET圈子<br />        PHP圈子<br />        ASP圈子<br />        JAVA圈子<br />	</div>	</li>	<li id="iwqucem"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">論壇導航	<div   id="kebimmx"   class="list">		論壇首頁<br />        技術論壇<br />        圖片論壇<br />	</div>	</li>	<li id="ouujqjk"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">賬戶管理	<div   id="vbxquro"   class="list">        我的帳號<br />        余額轉移<br />        我的地盤<br />	</div>	</li>	</ul></div></body></html>

上一篇：純CSS打造中英文雙語導航菜單

下一篇：從頁面左側滑出的導航菜單

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注