怎么用纯CSS实现鼠标经过后出现下拉菜单

这篇文章主要介绍了怎么用纯CSS实现鼠标经过后出现下拉菜单，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

　　HTML部分：

　　1、我们可以使用任何的HTML元素来打开下拉菜单，如：<span>或a<button>元素

　　2、使用容器元素(例如<div>)来创建下拉菜单的内容，并放在任何你想放的位置上。

　　3、使用<div>元素来包裹这些元素，并使用CSS来设置下拉内容的样式。

　　CSS部分：

　　1、.dropdown使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用position:absolute)的右下角位置。

　　2、.dropdown-content中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意:如果你想设置下拉内容与下拉按钮的宽度一致，可设置width为100%。

　　3、:hover选择器用于将鼠标移动到下拉按钮上时显示下拉菜单。

　　实例：用纯CSS做一个导航下拉菜单，当鼠标经过时出现下拉菜单

　　HTML代码：

　　<p>纯CSS实现鼠标移动到按钮上打开下拉菜单。</p>

　　<divclass="dropdown">

　　<buttonclass="dropbtn">下拉菜单</button>

　　<divclass="dropdown-content">

　　<ahref="#">菜单1</a>

　　<ahref="#">菜单2</a>

　　<ahref="#">菜单3</a>

　　</div>

　　</div>

　　CSS部分：

　　.dropbtn{

　　background-color:#4CAF50;

　　color:white;

　　padding:16px;

　　font-size:16px;

　　border:none;

　　cursor:pointer;

　　}

　　.dropdown{

　　position:relative;

　　display:inline-block;

　　}

　　.dropdown-content{

　　display:none;

　　position:absolute;

　　background-color:#f9f9f9;

　　width:100%;;

　　box-shadow:0px8px16px0pxrgba(0,0,0,0.2);

　　}

　　.dropdown-contenta{

　　color:black;

　　padding:12px16px;

　　text-decoration:none;

　　display:block;

　　}

　　.dropdown-contenta:hover{

　　background-color:#f1f1f1

　　}

　　.dropdown:hover.dropdown-content{

　　display:block;

　　}

　　.dropdown:hover.dropbtn{

　　background-color:#3e8e41;

　　}

感谢你能够认真阅读完这篇文章，希望小编分享的“怎么用纯CSS实现鼠标经过后出现下拉菜单”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!