下拉框-鼠标经过时出现下拉框

最新推荐文章于 2023-02-14 09:17:12 发布

舒眉

最新推荐文章于 2023-02-14 09:17:12 发布

阅读量2k

点赞数 1

分类专栏：前端技术文章标签： display 下拉框 css

本文链接：https://blog.csdn.net/sunshine_0880/article/details/78316510

版权

前端技术专栏收录该内容

38 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		ul {
			list-style: none;   /*去除小圆点*/
		}
		a {
			text-decoration: none;   /*去除链接的下划线*/
			color: #666;
		}
		.mnue {
			width: 100%;
			margin-top: 50px;
			background-color: #eee;
			border-top: 2px solid #ccc;
			border-bottom: 2px solid #ccc;
		}
		.mnue-tit {
			margin: 0;
			width: 250px;
			height: 29px;
			margin: 0 auto;
			background-color: #ddd;
			border-right: 2px solid #ccc;
			border-left: 2px solid #ccc;
		}
		.mnue-tit a span {
			/*text-align: center;*/
			margin-left: 70px;
		}
		.mnue-son {
			display: none;  /*隐藏下拉内容*/
			width: 250px;
			height: 130px;
			padding-top: 5px;
			background-color: #ddd;
		}
		.mnue-tit:hover .mnue-son {
			display: block;
		}
		.mnue-son li {
			text-align: center; /*显示下拉内容*/
			padding-top: 10px;
		}
		.mnue-son li:hover a {
			color: #e62310;
		}
		.mnue-son ul li,
		.mnue .mnue-tit span {
			font-size: 22px;
		}
	</style>
</head>
<body>
	<div class="mnue">
		<div class="mnue-tit">
			<a href="#"><span>Marketing</span></a>
			<em></em>
			<div class="mnue-son">
				<ul>
					<li>
						<a href="#">L'avion News</a>
					</li>
					<li>
						<a href="#">Previous Events</a>
					</li>
					<li>
						<a href="#">Coming Soon</a>
					</li>
				</ul>
			</div>
		</div>	
	</div>
</body>
</html>

效果图展示：