形形色色的下拉菜单------不断补充中

最新推荐文章于 2022-03-02 22:11:29 发布

chubangfeng1792

最新推荐文章于 2022-03-02 22:11:29 发布

阅读量117

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/zhaoxiaobao/blog/368867

本文详细介绍了如何使用CSS实现一个带有二级菜单的导航栏。通过设置相对定位和绝对定位，结合:hover伪类，实现了菜单项的悬停效果及下拉子菜单的显示隐藏功能。

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

1.css 实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}	
		ul{
			position: relative;
		}
		#nav{
			width: 680px;
			height: 60px;
			background: #000000;
			margin: 0 auto;
		}
		#nav a{
			color: #787d82;
		}
	    #nav a:hover{
			color: #FFF2D1;
		}
		ul li{
			list-style:none;
			float: left;
			height: 60px;
			display: block;
			line-height: 60px;
			/*background: #c3c3c3;*/

		}
		ul li a{
			text-decoration: none;
			color: #000000;
			padding: 0 15px;
			display: block;
		}
		ul li a:hover{
			background-color:#364247; 
		}


		ul li ul {
			position: absolute;	
			display: none;
		}
		ul li ul li{
			float: none;
			margin-top: 4px;
						background-color:#4D5A61; 


		}
		ul li:hover ul{display: block;}
	</style>

	<div id="nav">
		<ul>

			<li><a href="">首页</a></li>
			<li><a href="">课程大厅</a>
				<!-- 二级 -->
				<ul>
					<li><a href="">jsjsjsjsjsjs</a></li>
					<li><a href="">java</a></li>
					<li><a href="">php</a></li>
				</ul>

			</li>
			<li><a href="">学习中心</a></li>
			<li><a href="">经典案例</a></li>
			<li><a href="">关于我们</a></li>
		</ul>

	</div>
</body>
</html>

转载于:https://my.oschina.net/zhaoxiaobao/blog/368867