HTML元素与页面缩放不对齐

Question

我有一个导航栏，其中包含使用UL元素创建的下拉菜单。目前，当网页放大或缩小时，下拉表会移动。如何设置CSS样式以使下拉菜单保持对齐？

<ul id="links">
  <li>First link</li>
  <li>Second link
    <ul id="dropdown1">
      <li>Drop down item 1</li>
      <li>Drop down item 1</li>
      <li>Drop down item 1</li>
    </ul>
  </li>
  <li>Third link</li>
  <li>Fourth link
    <ul id="dropdown2">
      <li>Drop down item 1</li>
      <li>Drop down item 1</li>
      <li>Drop down item 1</li>
    </ul>
  </li>
</ul>

jsFiddle here。