如何用CSS實(shí)現(xiàn)三級(jí)導(dǎo)航菜單

發(fā)布時(shí)間：2021-08-04 21:34:55 來(lái)源：億速云閱讀：120 作者：chen 欄目：web開發(fā)

這篇文章主要講解了“如何用CSS實(shí)現(xiàn)三級(jí)導(dǎo)航菜單”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何用CSS實(shí)現(xiàn)三級(jí)導(dǎo)航菜單”吧！

這是一款CSS導(dǎo)航菜單，三級(jí)菜單，資源完整，超實(shí)用，希望大家喜歡。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/css-3l-nav-menu-style-codes/

具體代碼如下：

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>CSS導(dǎo)航</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<style type="text/css">

</style>
</HEAD>
<BODY>
<UL id=nav>
<LI class=top><A class=top_link
href="#">首頁(yè)</A></LI>
<LI class=top><A id=products class=top_link
href="#">關(guān)于我們</A>
<UL class=sub>
<LI><A href="#">公司簡(jiǎn)介</A></LI>
<LI><A href="#">董事長(zhǎng)&總裁</A></LI>
<LI><A href="#">發(fā)展歷程</A></LI>
<LI><A href="#">公司榮譽(yù)</A></LI></UL></LI>
<LI class=top><A id=services class=top_link href="#">產(chǎn)品&服務(wù)</A>
<UL class=sub>
<LI><A class=fly href="#">產(chǎn)品1</A>
<UL>
<LI><A href="#">配套</A></LI>
<LI><A href="#">配件</A></LI></UL></LI>
<LI><A class=fly href="#">產(chǎn)品2</A>
<UL>
<LI><A href="#">產(chǎn)品2-1</A></LI>
<LI><A href="#">產(chǎn)品2-2</A></LI></UL></LI>
<LI><A class=fly href="#">服務(wù)</A>
<UL>
<LI><A href="#">服務(wù)111</A></LI>
<LI><A href="#">服務(wù)112</A></LI>
<LI><A href="#">服務(wù)113</A></LI>
<LI><A href="#">服務(wù)114</A></LI>
<LI><A href="#">服務(wù)115</A></LI></UL></LI></UL></LI>
<LI class=top><A id=contacts class=top_link
href="#">新聞中心</A>
<UL class=sub>
<LI><A href="#">公告</A></LI>
<LI><A href="#">行業(yè)新聞</A></LI></UL></LI>
<LI class=top><A id=hr class=top_link href="#">人力資源</A>
<UL class=sub>
<LI><A href="#">人才戰(zhàn)略</A></LI>
<LI><A href="#">社會(huì)招聘</A></LI>
<LI><A href="#">公司福利</A></LI></UL></LI>
<LI class=top><A id=investors class=top_link
href="#">合作伙伴</A>
<UL class=sub>
<LI><A href="#">伙伴1</A></LI>
<LI><A href="#">伙伴2</A></LI>
<LI><A href="#">伙伴3</A></LI></UL></LI>
<LI class=top><A id=privacy class=top_link href="#">聯(lián)系我們</A></LI></UL>
</BODY>
</HTML>

感謝各位的閱讀，以上就是“如何用CSS實(shí)現(xiàn)三級(jí)導(dǎo)航菜單”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何用CSS實(shí)現(xiàn)三級(jí)導(dǎo)航菜單這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問(wèn)一下細(xì)節(jié)

如何用CSS實(shí)現(xiàn)三級(jí)導(dǎo)航菜單

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽