<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style
type="text/css">
body{font-family:"trebuchet MS",Arial;
font-size:14px;width:500px;
}
.longP,ul{
margin:0;padding:0;
}
ul{
list-style:none;
}
.longP{
border:1px solid black;
height:1000px;
width:300px;
}
#floatingBox{
border:1px solid black;
padding:10px;
position:absolute;
right:50px;
width:200px;
}
.menu{
font-weight:bold;
margin-top:10px;
}
.menuItem{
margin:0;
padding:10px;
}
span{
color:#FA766;
cursor:pointer;
text-decoration:underline;
}
</style>
</head>
<body>
<div id="floatingBox">
<ul>
<li>
<span
class="menu">Menu Item 1</span>
<ul
class="menuItem">
<li><a
href="http://google.com">Sub link 1</a></li>
<li><a href="http://google.com">Sub
link 2</a></li>
<li><a
href="http://google.com">Sub link 3</a></li>
</ul>
</li>
<li>
<span class="menu">Menu Item 2</span>
<ul class="menuItem">
<li><span class="menu">Sub
menu</span>
<ul class="menuItem">
<li>
<span class="menu">3rd level menu</span>
<ul class="menuItem">
<li><a href="http://google.com">Sub link 1</a></li>
<li><a href="http://google.com">Sub link 2</a></li>
<li><a href="http://google.com">Sub link 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a
href="http://google.com">Sub Link1</a></li>
<li><a href="http://google.com">Sub
Link1</a></li>
</ul>
</li>
</ul>
</div>
<p class="longP">
This is paragraphp with hegiht set to 1000
to craete a long page</p>
<script type="text/javascript"
src="../jquery-1.4.2.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$(‘.menuItem‘).hide();
$(window).scroll(floatDiv);
floatDiv();
});
function floatDiv(){
$(‘#floatingBox‘).animate({top:$(document).scrollTop()+"px"},{duration:250,queue:false});
}
$(‘span.menu‘).click(function(){
$(this).next(‘ul‘).slideToggle(‘fast‘);
});
</script>
</body>
</html>
原文：http://www.cnblogs.com/wint/p/3636305.html