效果預覽：
http:///keleyi/phtml/jqmenu/1.htm
完整代碼，保存到html文件打開也可以查看效果：
<!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>
<title>jquery動態彈出下拉導航菜單--</title><base target="_blank" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#333;text-decoration:underline;}
body{font:12px/180% Arial,Lucida,Verdana,"宋體",Helvetica,sans-serif;color:#333;background:#fff;}
/* navbox */
.navbox,.nav li,.nav li.current a,.nav li.selected a span,.nav li a.selected,.nav li a.selected span{background:url(http:///keleyi/phtml/jqmenu/1/headerbg.png) no-repeat;}
.navbox{height:39px;background-position:0 -138px;background-repeat:repeat-x;position:relative;z-index:9;}
.nav{width:960px;margin:0 auto;}
.nav li{float:left;height:39px;background-position:100% -99px;padding:0 3px 0 2px;position:relative;}
.nav li.last{background:none;}
.nav li a{float:left;display:block;padding:0 0 0 4px;height:39px;overflow:hidden;}
.nav li a span{float:left;display:block;padding:0 4px 0 0;line-height:39px;font-size:14px;color:#fff;font-weight:800;cursor:pointer;width:142px;text-align:center;}
.nav li.selected a,.nav li a.selected{background-position:0 -60px;text-decoration:none;}
.nav li.selected a span,.nav li a.selected span{background-position:100% -60px;color:#ff7e00;}
.nav li.selected .submenu{display:block;}
.nav li .submenu{display:none;position:absolute;top:0;left:0;}
.nav li .submenu{border-style:solid;border-width:0px 1px 1px 1px;border-color:#ddd;padding:0 5px 5px 5px;width:132px;background:#fff;}
.nav li .submenu{-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-moz-box-shadow:0 5px 5px #D3D3D3;-webkit-box-shadow:0 5px 5px #D3D3D3;box-shadow:0 5px 5px #D3D3D3;}
.nav li .submenu li{float:none;padding:0;background:none;height:auto;border-bottom:dotted 1px #BEBEBE;}
.nav li .submenu li.last{border:none;}
.nav li .submenu li a{float:none;padding:0;text-align:center;height:28px;line-height:28px;background:none;}
.nav li .submenu li a:hover{background:#ddd;font-weight:800;}
</style>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http:///keleyi/phtml/jqmenu/1/ddsmoothmenu.js"></script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "kele"+"yi", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'nav'
});
</script>
</head>
<body>
<div>
<a href="http:///a/bjac/cs30cft8.htm" target="_blank">原文</a>
</div>
<div class="navbox">
<div class="nav" id="keleyi">
<ul class="clearfix">
<li><a class="selected" target="_blank" href="http:///"><span>網站首頁</span></a></li>
<li>
<a target="_blank" href="http:///"><span>jQuery</span></a>
<ul class="submenu">
<li><a href="http:///a/bjac/phhq4ecr.htm">當前時間</a></li>
<li><a href="http:///a/bjac/1juhjegr.htm">替換圖片</a></li><li><a href="http:///a/bjac/c6gu08gm.htm" title="jQuery友善的圖片輪播(含首頁和尾頁)">圖片輪播</a></li><li><a href="http:///a/bjac/opnw2awa.htm">appendTo方法</a></li>
</ul>
</li>
<li>
<a target="_blank" href="http:///"><span>js圖片特效</span></a>
<ul class="submenu">
<li><a href="http:///a/bjac/141932b419e08101.htm" target="_blank">ColorBox彈出圖片組</a></li>
<li><a href="http:///a/bjac/06r1x7tg.htm" target="_blank">jquery相冊實例</a></li>
<li><a href="http:///dev/453467666cab56d0.htm" target="_blank">jquery圖片輪播切換</a></li>
<li><a href="http:///a/bjac/c6gu08gm.htm" target="_blank">友善的圖片輪播</a></li>
<li><a href="http:///a/bjac/gucmqug3.htm" target="_blank">圖片上下箭頭滾動</a></li>
<li><a href="http:///a/bjac/a6e756c811719fff.htm" target="_blank">顯示左右箭頭的翻頁代碼</a></li>
<li><a href="http:///a/bjac/ppdss7ux.htm" target="_blank">彈出燈箱窗口浏覽圖片</a></li>
</ul>
</li>
<li>
<a target="_blank" href="http:///menu/webqd/"><span>web前端</span></a>
<ul class="submenu">
<li><a href="http:///menu/javascript/" >Javascript</a></li>
<li><a href="http:///menu/jquery/" >jQuery</a></li>
<li><a href="http:///menu/html5/" >HTML5</a></li>
<li><a href="http:///menu/webqd/" >web前端</a></li>
</ul>
</li>
<li>
<a target="_blank" href="http:///"><span>js選項卡特效</span></a>
<ul class="submenu">
<li><a href="http:///a/bjac/n5kb0y0j.htm">jQ的find()</a></li><li><a href="http:///a/bjac/4013kn5s.htm">jquery的on</a></li>
<li><a href="http:///a/bjac/mt97p5y9.htm">側邊導航欄</a></li><li><a href="http:///a/bjac/phhq4ecr.htm">當前時間</a></li>
</ul>
</li>
<li>
<a target="_blank" href="http:///"><span>js文字特效</span></a>
<ul class="submenu">
<li><a href="http:///a/bjac/cs30cft8.htm">下拉導航菜單</a></li><li><a href="http:///a/bjac/tmx4mq76.htm">jQ的eq</a></li>
<li><a href="http:///a/bjac/4pdfle7v.htm">動畫導航菜單</a></li><li><a href="http:///a/bjac/nk1dr8xn.htm">window的高寬</a></li>
<li><a href="http:///a/bjac/cx165ov3.htm">jQuery的使用</a></li><li><a href="http:///a/bjac/4saw3kmj.htm">jQ優勢與不足</a></li>
<li><a href="http:///a/bjac/25mku22l.htm">jQuery介紹</a></li><li><a href="http:///a/bjac/6c5snbtc.htm">div子元素</a></li>
<li><a href="http:///a/bjac/x3qngfqx.htm">each遍歷方法</a></li><li><a href="http:///a/bjac/8p1g5yeq.htm">JQ鼠標位置</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
菜單大全：http:///a/bjac/veugsmw9.htm