豎向多級(jí)CSS滑動(dòng)菜單_菜單導(dǎo)航特效

豎向的多級(jí)CSS滑動(dòng)菜單，純CSS實(shí)現(xiàn)，不摻雜任何JavaScript代碼，適用范圍廣，兼容性好，效果不錯(cuò)，�？创蠹蚁矚g。

<!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" mrc="text/html; charset=utf-8" /> 
<title>CSS滑動(dòng)菜單-mb5u.com</title> 
<style type="text/css"> 
body { 
margin: 0; 
padding: 30px; 
background: #FFF; 
color: #555; 
} 
h1 { 
font: bold 16px Arial, Helvetica, sans-serif; 
} 
p { 
font: 11px Arial, Helvetica, sans-serif; 
} 
a { 
color: #900; 
text-decoration: none; 
} 
a:hover { 
background: #900; 
color: #FFF; 
}

/* Root = Vertical, Secondary = Vertical */ 
ul#navmenu, 
ul#navmenu li, 
ul#navmenu ul { 
margin: 0; 
border: 0 none; 
padding: 0; 
width: 160px; /*For KHTML*/ 
list-style: none; 
} 
ul#navmenu li { 
display: block !important;
display: inline;
position: relative; 
}

ul#navmenu a { 
border: 1px solid #FFF; 
border-right-color: #CCC; 
border-bottom-color: #CCC; 
padding: 0 6px; 
display: block; 
background: #EEE; 
color: #666; 
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; 
text-decoration: none; 
height: auto !important; 
height: 1%; /*For IE*/ 
}

ul#navmenu a:hover, 
ul#navmenu li:hover a, 
ul#navmenu li.iehover a { 
background: #CCC; 
color: #FFF; 
}

ul#navmenu li:hover li a, 
ul#navmenu li.iehover li a { 
background: #EEE; 
color: #666; 
}

ul#navmenu li:hover li a:hover, 
ul#navmenu li:hover li:hover a, 
ul#navmenu li.iehover li a:hover, 
ul#navmenu li.iehover li.iehover a { 
background: #CCC; 
color: #FFF; 
}

ul#navmenu li:hover li:hover li a, 
ul#navmenu li.iehover li.iehover li a { 
background: #EEE; 
color: #666; 
} 
/* 3rd Menu Hover Persistence */ 
ul#navmenu li:hover li:hover li a:hover, 
ul#navmenu li:hover li:hover li:hover a, 
ul#navmenu li.iehover li.iehover li a:hover, 
ul#navmenu li.iehover li.iehover li.iehover a { 
background: #CCC; 
color: #FFF; 
}

ul#navmenu li:hover li:hover li:hover li a, 
ul#navmenu li.iehover li.iehover li.iehover li a { 
background: #EEE; 
color: #666; 
} 
 
ul#navmenu li:hover li:hover li:hover li a:hover, 
ul#navmenu li.iehover li.iehover li.iehover li a:hover { 
background: #CCC; 
color: #FFF; 
} 
ul#navmenu ul, 
ul#navmenu ul ul, 
ul#navmenu ul ul ul { 
display: none; 
position: absolute; 
top: 0; 
left: 160px; 
} 
/* /*/ 
ul#navmenu li:hover ul ul, 
ul#navmenu li:hover ul ul ul, 
ul#navmenu li.iehover ul ul, 
ul#navmenu li.iehover ul ul ul { 
display: none; 
} 
ul#navmenu li:hover ul, 
ul#navmenu ul li:hover ul, 
ul#navmenu ul ul li:hover ul, 
ul#navmenu li.iehover ul, 
ul#navmenu ul li.iehover ul, 
ul#navmenu ul ul li.iehover ul { 
display: block; 
} 
</style> 
<script type="text/javascript"> 
 
</script> 
</head> 
<body> 
<h1>CSS Menu - Vertical By mb5u.com</h1> 
<hr /> 
<ul id="navmenu"> 
<li><a href="/">My Blog</a></li> 
<li><a >Work +</a> 
<ul> 
<li><a >Websites +</a> 
<ul> 
<li><a >jQuery</a></li> 
<li><a >ajax</a></li> 
<li><a >extjs</a></li> 
</ul> 
</li> 
<li><a >Links</a></li> 
<li><a >Contact</a></li> 
</ul> 
</li> 
<li><a >Learn +</a> 
<ul> 
<li><a >CSS +</a> 
<ul> 
<li><a >mb5u.com</a></li> 
<li><a >spriteNav</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a >Messages</a></li> 
</ul> 
</body> 
</html>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2010-05-22

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索豎向多級(jí)CSS滑動(dòng)菜單
特效說明：
菜單導(dǎo)航模板-豎向多級(jí)CSS滑動(dòng)菜單。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

豎向多級(jí)CSS滑動(dòng)菜單_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些