<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
text-decoration: none;/* 去掉超链接下划线 */
color: black;
width: 100px;
height: 40px;
font-size: 18px;
display: inline-block; /* 转换成行内块级元素,使a独占一行 */
background-color: #F9F9F9;
/* margin-bottom:2px; */
line-height: 45px;
}
a:hover{
background-color: #F1F1F1;/* 鼠标悬停时a标签状态 */
}
.btn1 {
display: block;
width: 50px;
height: 28px;
text-align: center;
line-height: 28px;
background-color: #4BAE50;
color: white;
}
.btn1:hover{
background-color: #3E8E41;
cursor:pointer;
}
.sub_menu_1{
display: none;/* 隐藏 */ /* 取消元素的格式 所以元素不会显示 */
}
div.btn1:hover div.sub_menu_1 {
display: block;/* 显示 */ /* 基于元素一个形式让他以块级元素的形式展现 */
}
</style>
</head>
<body>
<div class="btn1">左
<div class="sub_menu_1">
<a href="">菜鸟教程1</a>
<a href="">菜鸟教程2</a>
<a href="">菜鸟教程3</a>
</div>
</div>
</body>
</html>
display案例-下拉菜单
最新推荐文章于 2023-01-16 10:34:48 发布