CSS实战心得笔记——常用下拉菜单

最新推荐文章于 2023-03-20 23:17:44 发布

原创最新推荐文章于 2023-03-20 23:17:44 发布 · 285 阅读

1 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

1 篇文章

订阅专栏

本文分享了HTML5和CSS下拉菜单的实战经验，详细介绍了利用div盒子模型和CSS伪类实现下拉菜单的方法，包括代码实现和解决难点。

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

写作目的

花了一个月左右的时间，学完了HTML5和CSS的基础知识，主要通过W3school、菜鸟教程和网易云课堂的网课。学习过程中优快云的很多博客给了我帮助和启发，效果要比生硬的教程好得多。因此，开始实战练习的过程中，把每个案例的实现及其思路记录在这里，作为总结。

常用下拉菜单

主要用于网站首页导航栏的常用下拉菜单

实现思路

1、div盒子模型作为容器，下拉菜单整体为一个div，下拉菜单内容作为一个嵌套div。
2、构建两个类，一个为dropdown下拉菜单（导航一级菜单），一个为dropdown-content下拉内容（下拉子菜单）。
3、下拉内容部分display进行隐藏。
4、运用锚伪类hover，鼠标悬停一级菜单时改变背景颜色和块状元素显示，来实现菜单下拉。鼠标悬停下拉菜单内容链接时，改变背景颜色，实现切换菜单的效果。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
  <style>
		.dropdown{
			display: inline-block;
			position: relative;
			background-color: #FFA500;
			min-width: 200px;
			text-align: center;
			line-height: 50px;
			height: 50px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		}
		.dropdown-content{
			display: none;
			position: absolute;
			background-color:whitesmoke;
			min-width: 200px;
			text-align: center;
			height: 150px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		}
		.dropdown-content a{
			color: #000000;
			display: block;
			text-decoration: none;
		}
		.dropdown:hover .dropdown-content{
		  display: block;
		}
	    .dropdown-content a:hover{
		background-color: lightgrey;
	}

</style>
</head>
<body>



<div class="dropdown">
  <span>简介</span>
	
  <div class="dropdown-content">
    <a href="http://www.runoob.com">140</a>
   <a href="http://www.runoob.com">160</a>
	 <a href="http://www.runoob.com">180</a>
  </div>
	
	
</div>

	</body>
</html>