Css_下拉菜单

最新推荐文章于 2023-09-08 14:20:40 发布

Rapper_cl

最新推荐文章于 2023-09-08 14:20:40 发布

阅读量594

点赞数 1

分类专栏： Css

本文链接：https://blog.csdn.net/m0_37510446/article/details/89951499

版权

Css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1最基本的下拉菜单，当鼠标移到上面来时，会出现下拉菜单
dropdown：用来设置下拉菜单的入口
dropdown-content：用来设置下拉菜单出现的组件
dropdown:hover dropdown-content：意思是，当鼠标滑到dropdown对应的下拉菜单时就会显示出下拉菜单组件
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
:hover选择器用于用户将鼠标移动到下拉按钮上时显示下拉菜单

<!DOCTYPE　html>
<html>
<head>
<meta charset="UTF-8"/>
	<style>
	/*容器<div>。定义对应的下拉样式*/
.dp{  
position:relative;
display:inline;
}
/*下拉内容，默认被设置为隐藏*/
.dp-ct{
display:none;
position:absolute;
background-color:yellow;
box-shadow: 0px 8px 10px 0px  rgba(0,0,0,1);
padding:20 px 20px ;
}
/*鼠标移动上去之后，显示下拉菜单内容*/
.dp:hover .dp-ct{
display:block;
}
</style>
</head>
<body>
<p>在dp-ct中设置position为absolute原因是为了使该组件为一个固定位置，且其定位会相对于其距离最近且已定位的父元素，也就是菜单入口dp</p>
/*务必要记住，使用下拉菜单时 有个非常大的坑，就是，该下拉菜单项必须为容器元素，且其下拉菜单组件必须被包括在其中，其中div是最常见的下拉菜单标签，还有li标签也可以*/
<div class="dp">
<h >这是一个下拉菜单的入口</h>
<h class="dp-ct">这是一个下拉菜单的组件</h>
	</div>
</body>
</html>

上面是最简单的一个下拉菜单了，接下来我们给其添加其他小组件，使下拉菜单栏看起来更完整一些：
1当我们鼠标移动到对于菜单栏的时候，改变菜单栏的颜色，这样我们才可以准确判断这正是我们所选中的菜单栏
2出现下拉菜单栏之后，我们选中对应下拉菜单栏之后，和之前一样，修改我们所选中的菜单栏的颜色
dropdown-content 元素 {}:设置该下拉菜单中对应的元素格式
dropdown-content 元素:hover{} :当鼠标移动到下拉菜单项上来之后，修改该下拉菜单中对应元素中的文本格式

<!DOCTYPE　html>
<html>
<head>
<meta charset="UTF-8"/>
	<style>
/*容器<div>。定义对应的下拉样式*/
.dp{  
position:relative;
display:inline-block;
}
/*下拉内容，默认被设置为隐藏*/
.dp-ct{
display:none;
position:absolute;
background-color:yellow;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding:5px 5px ;
}
/*鼠标移动上去之后，显示下拉菜单内容*/
.dp:hover .dp-ct{
display:block;
}
/*鼠标移动上来之后，修改对应菜单项的颜色*/
.dp:hover .dp1{
	background-color:green;
		}
/*定义在下拉菜单中的属性*/
.dp-ct p{
	background-color:yellow;
		}
/*修改被选中下拉菜单项的颜色*/
.dp-ct  p:hover{
	background-color:green;
		}
		
</style>
</head>
<body>
<p>提示：这里利用了css的嵌套特性</p>
<div class="dp">
     	<div class="dp1">
<h>这是一个下拉菜单的入口</h>
<div class="dp-ct">
<div class="dp-ct1">
		<p>这是一个下拉菜单的组件</p>
		<p>菜单1</p>
		<p>菜单2</p>
	</div>
	</div>
	</div>
	</div>
</body>
</html>

Rapper_cl

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
Css_下拉菜单

1最基本的下拉菜单，当鼠标移到上面来时，会出现下拉菜单dropdown：用来设置下拉菜单的入口dropdown-content：用来设置下拉菜单出现的组件dropdown:hover dropdown-content：意思是，当鼠标滑到dropdown对应的下拉菜单时就会显示出下拉菜单组件.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮...
复制链接

扫一扫