溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

怎么用CSS實(shí)現(xiàn)4級(jí)下拉菜單

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

這篇文章主要介紹“怎么用CSS實(shí)現(xiàn)4級(jí)下拉菜單”，在日常操作中，相信很多人在怎么用CSS實(shí)現(xiàn)4級(jí)下拉菜單問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用CSS實(shí)現(xiàn)4級(jí)下拉菜單”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

這是一款基于CSS實(shí)現(xiàn)的多級(jí)菜單，一共可下拉出4級(jí)，在編寫(xiě)此類(lèi)的CSS菜單時(shí)要注意，一級(jí)的li，a的hover時(shí)，設(shè)置二級(jí)菜單可見(jiàn)，一級(jí)的li，a的hover時(shí)，設(shè)置二級(jí),三級(jí)菜單隱藏，一級(jí)和二級(jí)的li，a的hover時(shí)，設(shè)置三級(jí)和四級(jí)級(jí)菜單隱藏，一級(jí)二級(jí)菜單hover時(shí)，設(shè)定3級(jí)菜單可見(jiàn)，一級(jí)二級(jí)三級(jí)hover時(shí)，設(shè)置四級(jí)菜單可見(jiàn)，代碼里已加注了豐富的注釋?zhuān)藛物L(fēng)格如果不適合你口味的話，可自己美化一下。

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

怎么用CSS實(shí)現(xiàn)4級(jí)下拉菜單

在線演示地址如下：

http://demo.jb51.net/js/2015/css-4l-fade-out-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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 實(shí)現(xiàn)4級(jí)的下拉菜單</title>
</head>
<style>
<!--
* {margin:0px;padding:0px;}
body {font-size:12px;font-family:Arial;color:#000;}
a {font-size:12px;font-family:Arial;color:#000;text-decoration:none;}
.menu {position:relative;width:500px;background-color:#360;}
.menu ul {list-style-type:none;}
.menu li { float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:20px;border:1px solid #000;}
.menu ul ul ul{ visibility:hidden; position:absolute; left:122px;top:0px; border:solid 1px #999999;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;background:#360;padding:2px 10px;color:#fff;text-decoration:none;border:1px solid #360;}
.menu a:hover{background:#690;color:#000;}
.menu ul ul li {clear:both;text-align:left;}
.menu ul ul li a{display:block;width:100px;height:15px;}
.menu ul ul li a:hover{background:#690;}
.menu ul ul ul li a{clear:both;text-align:left;}
.menu UL LI:hover UL {VISIBILITY: visible}
.menu UL A:hover UL {
VISIBILITY: visible
/*一級(jí)的li，a的hover時(shí)，設(shè)置二級(jí)菜單可見(jiàn)*/
}
.menu UL :hover UL UL {
 VISIBILITY: hidden
 /*一級(jí)的li，a的hover時(shí)，設(shè)置二級(jí),三級(jí)菜單隱藏*/
}
.menu UL :hover UL :hover UL UL {
 VISIBILITY: hidden
 /*一級(jí)和二級(jí)的li，a的hover時(shí)，設(shè)置三級(jí)和四級(jí)級(jí)菜單隱藏*/
}
.menu UL :hover UL :hover UL {
 VISIBILITY: visible
 /*一級(jí)二級(jí)菜單hover時(shí)，設(shè)定3級(jí)菜單可見(jiàn)*/
}
.menu UL :hover UL :hover UL :hover UL {
 VISIBILITY: visible
 /*一級(jí)二級(jí)三級(jí)hover時(shí)，設(shè)置四級(jí)菜單可見(jiàn)*/
}
.menu ul ul ul a{ background:#00CCFF;}
.menu ul ul ul a:hover{ background:#0066FF;}
.menu ul ul ul ul a{ background:#390;}
.menu ul ul ul ul a:hover{ background:#690;}
-->
</style>
<body>
<div class="menu">
<ul>
<li><a href="#">公司首頁(yè)
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二級(jí)菜單_01</a></li>
<li><a href="#">二級(jí)菜單_02</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--第2個(gè)菜單開(kāi)始-->
<li><a href="#">公司簡(jiǎn)介<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二級(jí)菜單_01</a></li>
<li><a href="#">二級(jí)菜單_02</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--結(jié)束-->
<!--三級(jí)開(kāi)始-->
<li><a href="#">產(chǎn)品導(dǎo)航
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二級(jí)菜單_01</a>
<!--三級(jí)子菜單-->
<li><a href="#">二級(jí)菜單_02
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href="#">三級(jí)菜單_01</a></li>
 <li><a href="#">三級(jí)菜單_02</a></li>
 <li><a href="#">三級(jí)菜單_03</a></li>
 <li><a href="#">三級(jí)菜單_04
 <!--四級(jí)菜單開(kāi)始-->
     <!--[if IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
     <ul>
     <li><a href="#">四級(jí)菜單_01</a></li>
     <li><a href="#">四級(jí)菜單_02</a></li>
     <li><a href="#">四級(jí)菜單_03</a></li>
     <li><a href="#">四級(jí)菜單_04</a></li>
     </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <!--四級(jí)子菜單結(jié)束-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--三級(jí)結(jié)束-->
<!--三級(jí)子菜單-->
<li><a href="#">二級(jí)菜單_03
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href="#">三級(jí)菜單_01</a></li>
 <li><a href="#">三級(jí)菜單_02</a></li>
 <li><a href="#">三級(jí)菜單_03</a></li>
 <li><a href="#">三級(jí)菜單_04
 <!--四級(jí)菜單開(kāi)始-->
     <!--[if IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
     <ul>
     <li><a href="#">四級(jí)菜單_01</a></li>
     <li><a href="#">四級(jí)菜單_02</a></li>
     <li><a href="#">四級(jí)菜單_03</a></li>
     <li><a href="#">四級(jí)菜單_04</a></li>
     </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <!--四級(jí)子菜單結(jié)束-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--三級(jí)結(jié)束-->
</ul>
</body>
</html>

到此，關(guān)于“怎么用CSS實(shí)現(xiàn)4級(jí)下拉菜單”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手