欢迎来的我的小院，恭喜你今天又要涨知识了！
案例内容
利用CSS实现图片的下拉菜单。
演示
学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小院里的霍大侠</title>
<style>
.dropdown{
position: relative;
display: inline-block;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content{
display: block;
}
.desc{
padding: 15px;
text-align: center;
}
.back{
width: 500px;
height: 500px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="back">
<h2>下拉图片</h2>
<div class="dropdown">
<img src="2.png" width="300" height="150">
<div class="dropdown-content">
<img src="2.png" width="400" height="200">
<div class="desc">关注我，每天学习一点点，让你不再枯燥不再孤单</div>
</div>
</div>
</div>
</body>
</html>
总结思考
学习点： 1、position 属性指定了元素的定位类型 relative 定位：相对定位元素的定位是相对其正常位置。 absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html> 2、display 属性规定元素应该生成的框的类型 none ：此元素不会被显示 inline-block ：行内块元素 3、box-shadow属性可以设置一个或多个下拉阴影的框
使用CSS完成图片的下拉菜单，可以在图片缩略的情况下，不打开的页面，不添加按钮完成图片查看，减少界面按钮，优化界面。
关注我，跟着我每天学习一点点，让你不在枯燥，不在孤单..
全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
标签：Web,dropdown,下拉,元素,position,定位,display,CSS,图片 From： https://blog.51cto.com/huodaxia/5968124