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>