基于CSS實現(xiàn)的4級下拉菜單效果代碼
發(fā)布時間：2015-09-17 09:52:04 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了基于CSS實現(xiàn)的4級下拉菜單效果代碼,基于css通過對頁面元素樣式的設(shè)置實現(xiàn)四級下拉菜單的效果,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了基于CSS實現(xiàn)的4級下拉菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款基于CSS實現(xiàn)的多級菜單，一共可下拉出4級，在編寫此類的CSS菜單時要注意，一級的li，a的hover時，設(shè)置二級菜單可見，一級的li，a的hover時，設(shè)置二級,三級菜單隱藏，一級和二級的li，a的hover時，設(shè)置三級和四級級菜單隱藏，一級二級菜單hover時，設(shè)定3級菜單可見，一級二級三級hover時，設(shè)置四級菜單可見，代碼里已加注了豐富的注釋，菜單風(fēng)格如果不適合你口味的話，可自己美化一下。
運行效果截圖如下：
在線演示地址如下：
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 實現(xiàn)4級的下拉菜單</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
/*一級的li，a的hover時，設(shè)置二級菜單可見*/
}
.menu UL :hover UL UL {
VISIBILITY: hidden
/*一級的li，a的hover時，設(shè)置二級,三級菜單隱藏*/
}
.menu UL :hover UL :hover UL UL {
VISIBILITY: hidden
/*一級和二級的li，a的hover時，設(shè)置三級和四級級菜單隱藏*/
}
.menu UL :hover UL :hover UL {
VISIBILITY: visible
/*一級二級菜單hover時，設(shè)定3級菜單可見*/
}
.menu UL :hover UL :hover UL :hover UL {
VISIBILITY: visible
/*一級二級三級hover時，設(shè)置四級菜單可見*/
}
.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="#">公司首頁
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二級菜單_01</a></li>
<li><a href="#">二級菜單_02</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--第2個菜單開始-->
<li><a href="#">公司簡介<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二級菜單_01</a></li>
<li><a href="#">二級菜單_02</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--結(jié)束-->
<!--三級開始-->
<li><a href="#">產(chǎn)品導(dǎo)航
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二級菜單_01</a>
<!--三級子菜單-->
<li><a href="#">二級菜單_02
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">三級菜單_01</a></li>
<li><a href="#">三級菜單_02</a></li>
<li><a href="#">三級菜單_03</a></li>
<li><a href="#">三級菜單_04
<!--四級菜單開始-->
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">四級菜單_01</a></li>
<li><a href="#">四級菜單_02</a></li>
<li><a href="#">四級菜單_03</a></li>
<li><a href="#">四級菜單_04</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--四級子菜單結(jié)束-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--三級結(jié)束-->
<!--三級子菜單-->
<li><a href="#">二級菜單_03
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">三級菜單_01</a></li>
<li><a href="#">三級菜單_02</a></li>
<li><a href="#">三級菜單_03</a></li>
<li><a href="#">三級菜單_04
<!--四級菜單開始-->
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">四級菜單_01</a></li>
<li><a href="#">四級菜單_02</a></li>
<li><a href="#">四級菜單_03</a></li>
<li><a href="#">四級菜單_04</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--四級子菜單結(jié)束-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--三級結(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 實現(xiàn)4級的下拉菜單</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
/*一級的li，a的hover時，設(shè)置二級菜單可見*/
}
.menu UL :hover UL UL {
VISIBILITY: hidden
/*一級的li，a的hover時，設(shè)置二級,三級菜單隱藏*/
}
.menu UL :hover UL :hover UL UL {
VISIBILITY: hidden
/*一級和二級的li，a的hover時，設(shè)置三級和四級級菜單隱藏*/
}
.menu UL :hover UL :hover UL {
VISIBILITY: visible
/*一級二級菜單hover時，設(shè)定3級菜單可見*/
}
.menu UL :hover UL :hover UL :hover UL {
VISIBILITY: visible
/*一級二級三級hover時，設(shè)置四級菜單可見*/
}
.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="#">公司首頁
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二級菜單_01</a></li>
<li><a href="#">二級菜單_02</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--第2個菜單開始-->
<li><a href="#">公司簡介<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二級菜單_01</a></li>
<li><a href="#">二級菜單_02</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--結(jié)束-->
<!--三級開始-->
<li><a href="#">產(chǎn)品導(dǎo)航
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二級菜單_01</a>
<!--三級子菜單-->
<li><a href="#">二級菜單_02
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">三級菜單_01</a></li>
<li><a href="#">三級菜單_02</a></li>
<li><a href="#">三級菜單_03</a></li>
<li><a href="#">三級菜單_04
<!--四級菜單開始-->
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">四級菜單_01</a></li>
<li><a href="#">四級菜單_02</a></li>
<li><a href="#">四級菜單_03</a></li>
<li><a href="#">四級菜單_04</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--四級子菜單結(jié)束-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--三級結(jié)束-->
<!--三級子菜單-->
<li><a href="#">二級菜單_03
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">三級菜單_01</a></li>
<li><a href="#">三級菜單_02</a></li>
<li><a href="#">三級菜單_03</a></li>
<li><a href="#">三級菜單_04
<!--四級菜單開始-->
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">四級菜單_01</a></li>
<li><a href="#">四級菜單_02</a></li>
<li><a href="#">四級菜單_03</a></li>
<li><a href="#">四級菜單_04</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--四級子菜單結(jié)束-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--三級結(jié)束-->
</ul>
</body>
</html>
希望本文所述對大家的css網(wǎng)頁設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了純CSS實現(xiàn)下拉菜單的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-09
使用css3制作的下拉菜單外觀非常漂亮，在各大網(wǎng)站都適用，今天小編通過本文給大家分享基于css3制作的動畫下拉菜單效果，需要的的朋友參考下吧2017-04-12- 本篇文章主要介紹了CSS導(dǎo)航欄及彈窗示例代碼，導(dǎo)航欄和彈窗是在web中應(yīng)用很廣泛的，非常具有實用價值，需要的朋友可以參考下。2017-01-10
- 這篇文章主要為大家詳細介紹了CSS下拉菜單簡單制作教程，鼠標(biāo)移動到指定元素上會出現(xiàn)下拉菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-05
- 這篇文章主要為大家詳細介紹了css制作黑色經(jīng)典導(dǎo)航下拉菜單的相關(guān)代碼，大氣簡單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-15
- 這篇文章主要介紹了你值得擁有的多種CSS下拉菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-14
- 這篇文章主要為大家介紹了CSS實現(xiàn)的灰色下拉菜單效果代碼,涉及css控制hover樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-14
- 下拉菜單在很多網(wǎng)頁中都能應(yīng)用到，這篇文章主要介紹了純CSS實現(xiàn)的大型下拉菜單的示例代碼的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編2018-05-03
