固定位置菜单涵盖了部分内容

Question

我做了这样的菜单：

<div id="menu">
  <a href="#p1">Paragraph 1</a>
  <a href="#p2">Paragraph 2</a>
  ...
</div>

我确定了它的位置：

#menu {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
}

还有一个内容div：

<div id="content">
  <p id="p1">...
  <p id="p2">...
  ...
</div>

凭借其风格：

#content {
  position: relative;
  top: 30px;
}

当我只是滚动页面时它完美无缺，但是当我从菜单中使用这些部分链接时，例如。 href =＆＃34;＃p8＆＃34;，菜单涵盖了本段的一部分。

我该怎么办？

修改

jsfiddle示例：http://jsfiddle.net/hcvuw4s9/

*尝试第3段

Answer 1

#content p {
    padding-top: 20px;
    display: inline-block;
}

http://jsfiddle.net/thisizmonster/ws34m9m7/