效果體驗：
http:///keleyi/phtml/jqtexiao/39.htm
HTML文件代碼：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery簡單漂亮的導航菜單 - </title><base target="_blank" />
<link href="http:///keleyi/phtml/jqtexiao/39/hovertreedaohang.css" rel="stylesheet" type="text/css" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
$("#hovertreecaidan li a").wrapInner( '<span class="out"></span>' );
$("#hovertreecaidan li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});
$("#hovertreecaidan li a").hover(function() {
$(".out", this).stop().animate({'top': '48px'}, 300); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 300); // move down - show
}, function() {
$(".out", this).stop().animate({'top': '0px'}, 300); // move up - show
$(".over", this).stop().animate({'top': '-48px'}, 300); // move up - hide
});
});
</script>
<style>.keleyicenter{width:820px;margin:2px auto;}</style>
</head>
<body>
<div class="keleyicenter"><h2>jQuery簡單漂亮的導航菜單</h2></div>
<div id="hovertreecaidan" class="hovertreedaohang">
<ul>
<li><a href="http://">首 頁</a></li>
<li><a href="http:///menu/jquery/">jQuery</a></li>
<li><a href="http:///menu/webqd/">Web前端</a></li>
<li><a href="http:///a/bjae/5ntk26xt.htm">原文</a></li>
<li><a href="http:///menu/html5/">HTML5</a></li>
<li><a href="http://hovertree.com/">HoverTree</a></li>
<li><a href="http://hovertree.com/texiao/">網頁特效</a></li>
<li><a href="http://tool./">工具</a></li>
<li><a href="http://hovertree.com/guestbook/">留言</a></li>
</ul>
<div class="hvtclear"></div>
</div>
</body>
</html>
其中jQuery的wrapInner() 方法使用指定的 HTML 內容或元素，來包裹每個被選元素中的所有內容 (inner HTML)。
參考：http://hovertree.com/hvtart/bjae/m66osaoc.htm