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;

 

　　}




本文转载自中文网