我在页面上有一个菜单，带有简洁的动画（感谢http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/）
我希望菜单在页面内容上滑动，但是当菜单滑出时，它会将文本等推开。
我对 z-indexes 不太感兴趣，但假设这是我需要寻找的地方，所以我尝试将导航 div 的 z-index 设置为 10，将内容 div 的 z-index 设置为 5：
<div id="nav" style="z-index:10">
<ul>
<li class="green">
<p><a href="#">Home</a></p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p><a href="#">About</a></p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p><a href="#">Contact</a></p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p><a href="#">Submit</a></p>
<p class="subtext">Send us your stuff!</p>
</li>
<li class="purple">
<p><a href="#">Terms</a></p>
<p class="subtext">Legal things</p>
</li>
</ul>
</div>
<div style="height: 450px; z-index:5">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
http://jsfiddle.net/brbcoding/EyFPB/6/
然而这并没有奏效。如何让菜单在内容上滑动而不移动？