一个基于jQuery+CSS打造的多级菜单，动感效果
一个jQuery+CSS打造的多级菜单，动感效果
jQuery+CSS 打造的多级动感展开菜单，颜色和动画搭配都很漂亮，动画平滑，支持四级展开，相信已经够你用了，http://www.jscss8.com/载图看不出动画效果，这是从WordPress博客程序里分享出来的。
前台部分代码
代码
<!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>JavaScript Dropdown Menu Demo by http://www.co de fans.net</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul class="menu" id="menu">
<li><a href="http://www.jscss8.com" class="menulink">Dropdown One</a>
<ul>
<li><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li>
<a href="http://www.jscss8.com" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 2</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 3</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 4</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href="http://www.jscss8.com" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 2</a></li>
<li>
<a href="http://www.jscss8.com" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 2</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 3</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 4</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 5</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 6</a></li>
</ul>
</li>
<li><a href="http://www.jscss8.com">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="http://www.jscss8.com">Navigation Item 4</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="http://www.jscss8.com" class="menulink">Non-Dropdown</a></li>
<li>
<a href="http://www.jscss8.com" class="menulink">Dropdown Two</a>
<ul>
<li><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li>
<a href="http://www.jscss8.com" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 2</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="http://www.jscss8.com" class="menulink">Dropdown Three</a>
<ul>
<li><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 2</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 3</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 4</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 5</a></li>
<li>
<a href="http://www.jscss8.com" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 2</a></li>
</ul>
</li>
<li><a href="http://www.jscss8.com">Navigation Item 7</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 8</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 9</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 10</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Dropdown Menu Demo by http://www.co de fans.net</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul class="menu" id="menu">
<li><a href="http://www.jscss8.com" class="menulink">Dropdown One</a>
<ul>
<li><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li>
<a href="http://www.jscss8.com" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 2</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 3</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 4</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href="http://www.jscss8.com" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 2</a></li>
<li>
<a href="http://www.jscss8.com" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 2</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 3</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 4</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 5</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 6</a></li>
</ul>
</li>
<li><a href="http://www.jscss8.com">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="http://www.jscss8.com">Navigation Item 4</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="http://www.jscss8.com" class="menulink">Non-Dropdown</a></li>
<li>
<a href="http://www.jscss8.com" class="menulink">Dropdown Two</a>
<ul>
<li><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li>
<a href="http://www.jscss8.com" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 2</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="http://www.jscss8.com" class="menulink">Dropdown Three</a>
<ul>
<li><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 2</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 3</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 4</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 5</a></li>
<li>
<a href="http://www.jscss8.com" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="http://www.jscss8.com">Navigation Item 1</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 2</a></li>
</ul>
</li>
<li><a href="http://www.jscss8.com">Navigation Item 7</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 8</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 9</a></li>
<li><a href="http://www.jscss8.com">Navigation Item 10</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
</body>
</html>
