用html和css3实现简单下拉菜单效果

最新推荐文章于 2023-06-18 18:10:45 发布

w͏l͏j͏

最新推荐文章于 2023-06-18 18:10:45 发布

阅读量846

点赞数

分类专栏：前端相关

本文链接：https://blog.csdn.net/qq_40624026/article/details/104435452

版权

前端相关专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基本思路

思路很简单，首先，利用div标签块元素的特点，设置其float:left，即可让它们排列
起来，然后，哪个导航下需要添加子菜单，只需要为其添加子元素即可，设置子元素的
显示display:none；这样就可以让初始状态下子标签不会被显示出来，而要让其显示出
来也很简单，只需要让鼠标悬浮在父元素的时候，显示出来就可。

<!--user:wlj-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		body{
			background-color: azure;
		}
		.item{
			position: absolute;
			top: 10px;
			left: 600px;
			background-color: aqua;	
		}
		.item div{
			margin-right:20px;
			float: left;
			font-size: 20px;
		}
		.item div:hover{
			background-color: #FFFF00;
		}
		.drag a{
			display: none;
		}
		.drag:hover a{
			display: block;
			background-color: red;
		}
		.drag a:hover{
			background-color: chartreuse;
		}
	</style>
</head>
<body>
	<div class="item">
		<div>学校</div>
		<div class="drag">餐厅
			<a href="#">筷子</a>
			<a href="#">碗</a>
		</div>
		<div>超市</div>
		<div>车站</div>
	</div>
</body>
</html>

效果如下：
在这里插入图片描述
没有添加太多额外效果，如有错误，还望指正。

w͏l͏j͏

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
用html和css3实现简单下拉菜单效果

基本思路思路很简单，首先，利用div标签块元素的特点，设置其float:left，即可让它们排列起来，然后，哪个导航下需要添加子菜单，只需要为其添加子元素即可，设置子元素的显示display:none；这样就可以让初始状态下子标签不会被显示出来，而要让其显示出来也很简单，只需要让鼠标悬浮在父元素的时候，显示出来就可。<!DOCTYPE ...
复制链接

扫一扫