css如何實現(xiàn)下拉菜單

這篇文章主要為大家展示了“css如何實現(xiàn)下拉菜單”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“css如何實現(xiàn)下拉菜單”這篇文章吧。

　　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如何實現(xiàn)下拉菜單”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！