css - 垂直对齐 CSS3 下拉菜单

Question

我一直在使用这种方法制作下拉菜单:

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

它完全按照我的要求工作，唯一的问题是我无法让菜单项(不包括 Logo ，它的位置正确)在导航栏中垂直对齐。我尝试了很多方法，但似乎都不起作用。我怀疑另一个选择器在干扰，但我不知道是哪个。

这是我当前代码的结果:

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/

您还想具体更改什么？