垂直對齊CSS3下拉菜單

Question

我一直在使用這種方法制作一個下拉菜單：

http://azadcreative.com/2012/01/bulletproof-css3-dropdown-navigation-menu/

它的工作原理正是我想要它，唯一的問題是，我不能讓菜單項（不包括徽標，它的位置正確）在導航欄中垂直對齊。我已經嘗試了許多方法，但似乎沒有任何工作。我懷疑另一個選擇器是干擾，但我不知道哪個。

這裏就是我目前的代碼，結果是這樣的：

http://i.stack.imgur.com/fqh6W.png

我想對齊分隔符，也是如此。

我的CSS

<style type="text/css"> 
    @import url("inc/reset.css"); 
    @import url("fonts/fonts.css"); 
    body { background-color: #fff; } 
    nav { 
     width: 925px; 
     margin: 0 auto; 
     zoom: 1; 
     text-align: left; 
     border: 1px solid #000; 
    } 
    nav:before, nav:after { display: table; content: ""; zoom: 1; } 
    nav:after { clear: both; } 
     nav ul { 
      float: left; 
      zoom: 1; 
      width: auto; 
      z-index: 100; 
      position: relative; 
     } 
     nav ul:before, nav ul:after { display: table; content: ""; zoom: 1 } 
     nav ul:after { clear: both; } 
      nav ul li { 
       float: left; 
       padding: 0 0 10px 0; 
       position: relative; 
       outline: none; 
       padding: 0 1px 0 0; 
      } 
      nav ul li.span:before { content: ''; } 
      nav ul li + li:before { content: '|'; color: #a8c399; } 
     nav ul a { 
      padding: 15px; 
      float: right; 
      display: block; 
      zoom: 1; 
      font: .9em "jubilat-regular", "Franklin Gothic Book", "Times New Roman", serif; 
      text-transform: lowercase; 
     } 
     nav ul a:link, nav ul a:visited { color: #353536; text-decoration: none; outline: none; } 
     nav ul a:hover, nav ul a:active { color: #701271; text-decoration: none; outline: none; } 

    #menu li:hover > ul { display: block; } 
    #menu li:hover > a { color: #701271; } 

    nav li ul { 
     display: none; 
     margin: 0; 
     position: absolute; 
     top: 46px; 
     left: 15px; 
     width: 10em; 
     background: #fff; 
     border: 1px dashed #a8c399; 
     z-index: 1000; 
     zoom: 1; 
    } 
     nav li ul li + li:before { content: ''; } 
     nav li ul li:hover { background-color: #a8c399; } 
     nav li ul:before, nav li ul:after { display: table; content: ""; zoom: 1; } 
     nav li ul:after { clear: both; } 
    nav li ul a { float: none; } 
    nav li ul li { width: 10em; display: block; } 
</style> 

我的HTML：

<nav> 
<ul id="menu"> 
    <li><a href="#">Why Miche</a></li> 
    <li><span style="color:#701271;"><a href="#">Join Us</a></span> 
     <ul> 
      <li><a href="#">Join My Team!</a></li> 
      <li><a href="#">Starter Kits</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Host a Miche Party</a> 
     <ul> 
      <li><a href="#">Hostess Benefits</a></li> 
      <li><a href="#">Miche Party Ideas</a></li> 
     </ul> 
    </li> 
    <li class="span"><a href="#"><img src="images/logo.png" width="295" height="67" alt="Miche" /></a></li> 
    <li class="span"><span style="color:#701271;"><a href="#">Shop</a></span></li> 
    <li><a href="#">About Miche</a> 
     <ul> 
      <li><a href="#">Media</a></li> 
      <li><a href="#">FAQ</a></li> 
      <li><a href="#">Giving Back</a></li> 
     </ul> 
    </li> 
    <li><span style="color:#701271;"><a href="#">About Me</a></span></li> 
</ul> 
</nav> 

Answer 1

我對齊分隔符（在評論中添加CSS）：
http://jsfiddle.net/JTKEx/

還有什麼你想準確地改變？