CSS创建下拉菜单以及遇到的问题

最新推荐文章于 2022-10-24 09:36:43 发布

「已注销」

最新推荐文章于 2022-10-24 09:36:43 发布

阅读量456

点赞数 1

分类专栏： CSS学习知识点管理

本文链接：https://blog.csdn.net/gl767077147/article/details/78767069

版权

CSS学习知识点管理专栏收录该内容

8 篇文章 0 订阅

订阅专栏

方法一:给列表项加相对定位，然后给下拉菜单加绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style-type: none;
		}
		.list{
			width: 500px;
			/*让列表居中*/
			margin: 0 auto;
			/*如果加了overflow则下拉效果没有*/
			/*overflow: hidden;*/
		}
		.list>li{
			/*列表项靠左浮动*/
			float: left;
			/*给每个列表项定宽*/
			width: 100px;
		}
		ul a{
			display: block;
			text-decoration: none;
			text-align: center;
			line-height: 30px;
			padding: 10px 10px;
			color: #fff;
			background-color: #ccc;
		}
		.dropbtn{
			/*给第三个列表项设置相对定位*/
			position: relative;
		}
		.dropdown{
			/*给下拉菜单设置绝对定位*/
			position: absolute;
			/*设置绝对定位后,列表项的宽度会改变*/
			width: 100px;
			/*隐藏下拉菜单*/
			display: none;
			
		}
		.dropbtn:hover .dropdown{
			display: block;
		}
		ul a:hover,
		ul a:focus{
			background-color: #333;
		}
	</style>
</head>
<body>
	<nav>
		<ul class="list">
			<li><a href="#">语文</a></li>
			<li><a href="#">数学</a></li>
			<li class="dropbtn">
				<a href="#">英语</a>
				<ul class="dropdown">
					<li><a href="#">过去</a></li>
					<li><a href="#">将来</a></li>
					<li><a href="#">现在</a></li>
				</ul>
			</li>
			<li><a href="#">物理</a></li>
			<li><a href="#">化学</a></li>
		</ul>
	</nav>
</body>
</html>

下拉菜单(.dropdown)加绝对定位前:

下拉菜单(.dropdown)加绝对定位后:

方法二:把下拉菜单定位到屏幕之外，然后当鼠标悬停时重新定位它

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		.list{
			width: 40em;
			margin: 0 auto;
			border: 1px solid green;
			/*清除浮动*/
			overflow: hidden;
		}
		.list li{
			/*让列表项浮动并添加宽度*/
			float: left;
			width: 8em;
			background-color: #ccc;
		}
		.list a{
			display: block;
			padding: 0.3em 1em;
			text-decoration: none;
			text-align: center;
			color: #fff;
		}
		.list a:hover,
		.list a:focus{
			background-color: #333;
		}
		.dropmenu{
			width: 8em;
			/*设置绝对定位让其隐藏到屏幕之外*/
			position: absolute;
			left: -999em;
		}
		.dropbtn:hover .dropmenu{
			/*让下拉菜单回到正常位置*/
			left: auto;
		}
	</style>
</head>
<body>
	<ul class="list">
		<li><a href="#">语文</a></li>
		<li><a href="#">数学</a></li>
		<!-- 这里dropbtn类智能加在li上才有效果，加在a标签上无效果 -->
		<li class="dropbtn"><a href="#">英语</a>
			<ul class="dropmenu">
				<li><a href="#">过去</a></li>
				<li><a href="#">将来</a></li>
				<li><a href="#">现在</a></li>
			</ul>
		</li>
		<li><a href="#">物理</a></li>
		<li><a href="#">化学</a></li>
	</ul>
</body>
</html>

效果: