css如何实现下拉菜单

这篇文章主要为大家展示了“css如何实现下拉菜单”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css如何实现下拉菜单”这篇文章吧。

　　HTML代码：

　　<ul>

　　<ahref="#">水果</a>

　　<ul>

　　<li><ahref="#">苹果</a></li>

　　<li><ahref="#">香蕉</a></li>

　　<li><ahref="#">草莓</a></li>

　　</ul>

　　</ul>

　　<ul>

　　<ahref="#">甜点</a>

　　<ul>

　　<li><ahref="#">蛋糕</a></li>

　　<li><ahref="#">曲奇</a></li>

　　<li><ahref="#">面包</a></li>

　　</ul>

　　</ul>

　　<ul>

　　<ahref="#">奶茶</a>

　　<ul>

　　<li><ahref="#">红豆奶茶</a></li>

　　<li><ahref="#">珍珠奶茶</a></li>

　　<li><ahref="#">全套奶茶</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:0pxsolidblack;

　　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;

　　}

　　.platli:hover>a{

　　background-color:dimgrey;

　　}

以上是“css如何实现下拉菜单”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！