css - 锚 id 标签将部分带到所需位置

Question

<div id="nav_bar" style="position: fixed; height: 200px; z-index: 9999;">Navigation Bar</div>
<ul>
<li><a href"#1">A Section</a><li>
<li><a href"#2">B Section</a><li>
<li><a href"#3">C Section</a><li>
<ul>

<ul>
<li><a id="1">A Section</a></li>
<li><a id="2">B Section</a></li>
<li><a id="3">C Section</a></li>
</ul>

当我单击锚标记时，目标部分位于导航栏下方。无论如何我可以让它显示在导航栏的正下方吗？

非常感谢

http://jsfiddle.net/QDpRL/5/