如何对齐下拉菜单？

在这里，我制作了一个小下拉菜单¹的JSFiddle演示，但我只想不到如何下拉菜单子框。

<ul id="nav">
<li> <a href="#" class="main-menu">vcdsfds</a>
  <ul class="sub-menu">
    <li><a href="#">vcdsfds</a></li>
    ...
  </ul>
</li>
...
</ul>

我希望下拉列表的位置为：

¹原始下拉列表来源：http : //csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/