css 实现下拉的方式

最新推荐文章于 2024-08-24 09:00:00 发布

熙哥_tito

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量257

点赞数

分类专栏： css 文章标签： css html 前端

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。

本文链接：https://blog.csdn.net/weixin_49471755/article/details/131018347

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

该代码示例展示了如何使用CSS创建一个下拉菜单。默认情况下，下拉内容（dropdown-content）的display属性设置为none，当鼠标悬停在父元素（dropdown）上时，通过CSS的:hover伪类将其切换为block，显示下拉内容。下拉菜单包含一个图片和描述文本，具有一定的样式设计，如文字阴影和背景色。

摘要由CSDN通过智能技术生成

原理是: 要下拉的容器，默认给样式display：none; hover的时候display:block;

<style type="text/css">
    .dropdown {
		position: relative;
		display: inline-block;
	}
	.dropdown-content {
		display: none;
		position: absolute;
		text-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
		background-color: #ddd;
		min-width: 140px;
		z-index: 1;
	}
	.dropdown:hover .dropdown-content {
    	display: block;
	}
	.decs {
		text-align: center;
		padding: 15px;
	}
</style>

<div class="dropdown">
	<img src="/TAG/pic/41651.png" width="100px">
	<div class="dropdown dropdown-content">
		<img src="/TAG/pic/41651.png" width="150px" height="200px">
		<div class="decs">coffee</div>
	</div>
</div>