13518219792
网站建设资讯

NEWS

网站建设资讯

纯CSS如何实现鼠标经过后出现下拉菜单

纯CSS如何实现鼠标经过后出现下拉菜单？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联建站专注于江川网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供江川营销型网站建设，江川网站制作、江川网页设计、江川网站官网定制、重庆小程序开发服务，打造江川网络公司原创品牌,更为您提供江川网站排名全网营销落地服务。

随便打开网上的任何一个网站，你会发现这些网站都有导航部分，而且有些导航在鼠标经过后，会出现下拉菜单，那这种下拉菜单怎么做呢？其实，用纯CSS就可以做导航下拉菜单。接下来，就和大家聊聊CSS怎么做下拉菜单，好，进入正题。

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

菜单1 菜单2 菜单3

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: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   } 
   .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
   }   
   .dropdown-content a:hover {
    background-color: #f1f1f1
   }  
   .dropdown:hover .dropdown-content {
    display: block;
   }   
   .dropdown:hover .dropbtn {
    background-color: #3e8e41;
   }

看效果图片：

纯CSS如何实现鼠标经过后出现下拉菜单

关于纯CSS如何实现鼠标经过后出现下拉菜单问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。


文章标题：纯CSS如何实现鼠标经过后出现下拉菜单
分享路径：http://njwzjz.com/article/gshgoj.html

其他资讯