很独特的纯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 id="nav">	<ul>	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">网站首页	<div class="list">        我的博客<br />        我的日志<br />        我的音乐<br />	</div>	</li>	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子	<div class="list">	.NET圈子<br />        PHP圈子<br />        ASP圈子<br />        JAVA圈子<br />	</div>	</li>	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">论坛导航	<div class="list">		论坛首页<br />        技术论坛<br />        图片论坛<br />	</div>	</li>	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理	<div class="list">        我的帐号<br />        余额转移<br />        我的地盘<br />	</div>	</li>	</ul></div></body></html>

上一篇：纯CSS打造中英文双语导航菜单

下一篇：从页面左侧滑出的导航菜单

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注