css下拉菜单怎么做？

css可以在网页中实现很多的效果，其中css下拉菜单是经常需要用到的效果，本篇文章就来给大家具体分享一下css下拉菜单的实现方法。

话不多说，下面我们就来看具体的实现代码。

HTML代码：

    水果     
        
• 苹果
        
• 香蕉
        
• 草莓
    

    甜点     
        
• 蛋糕
        
• 曲奇
        
• 面包
    

    奶茶     
        
• 红豆奶茶
        
• 珍珠奶茶
        
• 全套奶茶
    

CSS代码：

 *{
            padding: 0;
            margin: 0;
        }
        ul,a{
            font-size: 20px;
            list-style: none;
            text-decoration: none;
            background-color: #3C3C3C;
            color: #FFFFFF;
            width: 100px;
            text-align: center;
            border: 0px solid black;
            border-radius: 5px;
            margin-top: 1px;
        }
        a{
            display: block;
        }

        .plat{
            display: none;
        }
        .nav{
             float: left;
             margin-left: 1px;
         }
        .nav:hover .plat{
            display: block;
            clear: both;
        }
        .plat li:hover>a{
            background-color: dimgrey;
        }

运行的效果如下：当鼠标放在下拉按钮上就会出现下拉菜单。

本篇文章到这里就已经全部结束了，更多精彩内容大家可以关注PHP中文网的CSS视频教程栏目！！！

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！