css下拉菜单怎么做？

互联网 19-4-10

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

HTML代码：

<ul>     <a href="#">水果</a>     <ul>         <li><a href="#">苹果</a></li>         <li><a href="#">香蕉</a></li>         <li><a href="#">草莓</a></li>     </ul> </ul> <ul>     <a href="#">甜点</a>     <ul>         <li><a href="#">蛋糕</a></li>         <li><a href="#">曲奇</a></li>         <li><a href="#">面包</a></li>     </ul> </ul> <ul>     <a href="#">奶茶</a>     <ul>         <li><a href="#">红豆奶茶</a></li>         <li><a href="#">珍珠奶茶</a></li>         <li><a href="#">全套奶茶</a></li>     </ul> </ul>

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;         }

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