基于CSS實(shí)現(xiàn)的4級(jí)下拉菜單效果代碼
發(fā)布時(shí)間：2015-09-17 09:52:04 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要為大家介紹了基于CSS實(shí)現(xiàn)的4級(jí)下拉菜單效果代碼,基于css通過(guò)對(duì)頁(yè)面元素樣式的設(shè)置實(shí)現(xiàn)四級(jí)下拉菜單的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了基于CSS實(shí)現(xiàn)的4級(jí)下拉菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款基于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)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/css-4l-fade-out-menu-style-codes/
具體代碼如下：
復(fù)制代碼
代碼如下:<!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>
"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>
希望本文所述對(duì)大家的css網(wǎng)頁(yè)設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了純CSS實(shí)現(xiàn)下拉菜單的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-09
使用css3制作的下拉菜單外觀非常漂亮，在各大網(wǎng)站都適用，今天小編通過(guò)本文給大家分享基于css3制作的動(dòng)畫(huà)下拉菜單效果，需要的的朋友參考下吧2017-04-12- 本篇文章主要介紹了CSS導(dǎo)航欄及彈窗示例代碼，導(dǎo)航欄和彈窗是在web中應(yīng)用很廣泛的，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-01-10
- 這篇文章主要為大家詳細(xì)介紹了CSS下拉菜單簡(jiǎn)單制作教程，鼠標(biāo)移動(dòng)到指定元素上會(huì)出現(xiàn)下拉菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-05
- 這篇文章主要為大家詳細(xì)介紹了css制作黑色經(jīng)典導(dǎo)航下拉菜單的相關(guān)代碼，大氣簡(jiǎn)單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-15
- 這篇文章主要介紹了你值得擁有的多種CSS下拉菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-14
- 這篇文章主要為大家介紹了CSS實(shí)現(xiàn)的灰色下拉菜單效果代碼,涉及css控制hover樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-14
- 下拉菜單在很多網(wǎng)頁(yè)中都能應(yīng)用到，這篇文章主要介紹了純CSS實(shí)現(xiàn)的大型下拉菜單的示例代碼的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編2018-05-03
