竖向多级CSS滑动菜单_菜单导航特效

竖向的多级CSS滑动菜单，纯CSS实现，不掺杂任何JavaScript代码，适用范围广，兼容性好，效果不错，希看大家喜欢。

<!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滑动菜单-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 href="http://mb5u.com">Work +</a> 
<ul> 
<li><a href="http://mb5u.com">Websites +</a> 
<ul> 
<li><a href="http://mb5u.com">jQuery</a></li> 
<li><a href="http://mb5u.com">ajax</a></li> 
<li><a href="http://mb5u.com">extjs</a></li> 
</ul> 
</li> 
<li><a href="http://mb5u.com">Links</a></li> 
<li><a href="http://mb5u.com">Contact</a></li> 
</ul> 
</li> 
<li><a href="http://mb5u.com">Learn +</a> 
<ul> 
<li><a href="http://mb5u.com">CSS +</a> 
<ul> 
<li><a href="http://mb5u.com">mb5u.com</a></li> 
<li><a href="http://mb5u.com">spriteNav</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="http://mb5u.com">Messages</a></li> 
</ul> 
</body> 
</html>

所属频道：菜单导航特效/更新时间：2010-05-22

[收藏][报错][返回列表]

竖向多级CSS滑动菜单_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些