垂直对齐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/

还有什么你想准确地改变？