设计下拉菜单

最新推荐文章于 2024-11-15 15:34:59 发布

原创最新推荐文章于 2024-11-15 15:34:59 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用纯CSS实现的下拉菜单案例，该菜单具备良好的交互性和视觉效果，包括多层次的下拉子菜单及鼠标悬停时的动态展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<head>
<title>bg</title>
<style type="text/css">
    body{background:#ebebeb;width:900px;margin:20px auto;color:#666;}
	a{color:#333;}
	#nav{
		margin:0;
		padding:7px 6px 0;
		line-height:100%;
		/*设计圆角外框及其阴影效果*/
		border-radius:2em;
		-webkit-border-radius:2em;
		-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
		/*下面样式将为菜单外框添加渐变背景效果*/
		background:#8b8b8b;
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9',endColorstr='#7a7a7a');
		background:-webkit-gradient(linear,left top,left bottom,from(#a9a9a9),to(#7a7a7a));
		border:solid 1px #6d6d6d;
	}
	#nav li{/*定义子菜单列表样式*/
		margin:0 5px;
		padding:0 0 8px;
		float:left;
		position:relative;
		list-style:none;
	}
	/*主菜单单项链接样式：默认效果*/
	#nav a{ 
		font-weight:bold;
		color:#e7e5e5;
		text-decoration:none;
		display:block;
		padding:8px 20px;
		margin:0;
		-webkit-border-radius:1.6em;
		text-shadow:0 1px 1px rgba(0,0,0,.3);
	}
	/*主菜单项链接样式，鼠标经过时效果*/
	#nav .current a,#nav li:hover>a{
		background:#d1d1d1;
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb',endColorstr='#alalal');
		background:-webkit-gradient(linear,left top,left bottom,from(#ebebe),to(#alalal));
		color:#444;
		border-top:solid 1px #f8f8f8;
		/*涉及盒子阴影及其字体阴影效果*/
		-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);
		box-shadow:0 1px 1px rgba(0,0,0,.2);
		text-shadow:0 1px 0 rgba(255,255,255,.8);
	}
	/*子菜单单链接样式，鼠标指针经过时效果*/
	#nav ul li:hover a,#nav li:hover  li a{
		background:none;
		border:none;
		color:#666;
		-webkit-box-shadow:none;
	}
	#nav ul a:hover{
		background:#0399d4 !important;
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec',endColorstr='0186ba');
		background:-webkit-gradient(linear,left top,left bottom,from(#04acec),to(#0186ba))!important;
		color:#fff!important;
		-webkit-border-radius:0;
		text-shadow:0 1px 1px rgba(0,0,0,.1);
	}
	/*二级列表样式*/
	#nav ul{
		background:#ddd;
		filter:progid:DXImageTransform.Microsoft.gradient(startColor='#ffffff',endColorstr='cfcfcf');/*兼容IE*/
		background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#cfcfcf));
		display:none;
		margin:0;
		padding:0;
		width:185px;
		position:absolute;
		top:35px;
		left:0;
		border:solid 1px #b4b4b4;
		/*设计子菜单显示圆角边框，以及阴影效果*/
		-webkit-border-radius:10px;
		border-radius:10px;
		-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);
		box-shadow:0 1px 3px rgba(0,0,0,.3);
	}
	/*定义鼠标指针经过时显示子菜单*/
	#nav li:hover>ul{display:block;}
	#nav ul li{
		float:none;
		margin:0;
		padding:0;
	}
	#nav ul a{
		font-weight:normal;
		text-shadow:0 1px 1px rgba(255,255,255,.9);
	}
	/*三级菜单列表框*/
	#nav ul ul{
		left:181px;
		top:-3px;
	}
	/*为第一个和最后一个子元素设置圆角效果*/
	#nav ul li:first-child>a{
		-webkit-border-top-left-radius:9px;
		-webkit-border-top-right-radius:9px;
	}
	#nav ul li:last-child>a{
		-webkit-border-bottom-left-radius:9px;
		-webkit-border-bottom-right-radius:9px;
	}
	/*清除固定高度，让菜单框自动张开包含所有子元素*/
	#nav:after{
		content:".";
		display:block;
		clear:both;
		visibility:hidden;
		line-height:0;
		height:0;
	}
	#nav{display:inline-block;}
	html[xmlns]#nav{display:block;}
	html#nav{height:1%;}
	 
</style>
</head>
<body>
	<ul id="nav">
		<li class="current"><a href="#">首页</a></li>
		<li><a href="#">新闻  >></a>
			<ul>
				<li><a href="#">国际新闻</a></li>
				<li><a href="#">国内新闻>></a>
					<ul>
						<li><a href="#">地方新闻</a></li>
						<li><a href="#">科技新闻>></a>
							<ul>
								<li><a href="#">移动互联网开发</a></li>
								<li><a href="#">云计算</a></li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">论坛</a></li>
		<li><a href="#">微博</a></li>
	</ul>
</body>
</html>