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/

你还想改变什么呢？

垂直对齐CSS3下拉菜单

1 个答案: