纯css实现鼠标移动到元素上出现下拉菜单

2025-10-25 02:03:46

1、新建HTML文件

2、创建大的div

纯css实现鼠标移动到元素上出现下拉菜单

3、设置div样式

纯css实现鼠标移动到元素上出现下拉菜单

4、创建子菜单

纯css实现鼠标移动到元素上出现下拉菜单

5、创建子菜单样式先隐藏起来

纯css实现鼠标移动到元素上出现下拉菜单

6、创建鼠标滑过显示子菜单

纯css实现鼠标移动到元素上出现下拉菜单

7、预览效果如图

纯css实现鼠标移动到元素上出现下拉菜单

8、鼠标滑过元素显示子菜单附上源码

<style>

.dorp{

position: relative;

display: inline-block;

}

.dorp_con{

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

padding: 12px 16px;

}

.dorp:hover .dorp_con{display:block;}

</style>

<body>

子菜单一

子菜单二

</div>

纯css实现鼠标移动到元素上出现下拉菜单

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。