如何在CSS中对齐导航下拉菜单？

我已经创建了简单的导航下拉菜单。。但是我仍然没有完成。

这是我的HTML和CSS工作的jsfiddle：http : //jsfiddle.net/rym2zku1/

当我悬停目录链接时，我需要显示如下所示：

的HTML：

<nav id="navWrap" role="navigation">
 <ul id="nav">
  <li class="nav-item first active">
    <a class="nav-item-link" href="/">Home</a>                
  </li>
  <li class="nav-item">
  <a class="nav-item-link" href="catalog.html">Catalog</a>  
  <ul>
  <li><a href="#">Data Listing</a></li>
  <li><a href="#">Web Scheduling</a></li>
  <li><a href="#">Google Maps Application</a></li>
  </ul>         
  </li>
<li class="nav-item">
<a class="nav-item-link" href="/blogs/news">Blog</a>                
 </li>
<li class="nav-item">
<a class="nav-item-link" href="/pages/about-us">About Us</a>                
</li>
</ul>
</nav>

任何帮助将不胜感激。提前致谢