html - 纯 CSS 下拉导航下拉到左侧

Question

我有这样的 CSS 代码:

.nav {
    background: #5d2c2c;
    background-repeat: repeat-x;
    height: 30px;
    margin: 0;
    padding: 0 10px;
    list-style: none;
    text-align: right;
}

.nav li {
    position: relative;
    margin: 0;
    padding: 0;
    display: inline;
    padding: 5px;
}

.nav li a {
    color: #b89885;
    text-decoration: none;
    line-height: 30px;
}

.nav li ul {
    display: none;
    position: absolute;
    top: 1em;
    left: 0;
    text-align: left;
    background: #5d2c2c;
}

.nav li > ul {
    top: auto;
    left: auto;
}

.nav li:hover ul {
    display: block;
}

HTML 部分如下所示:

<ul class="nav">
    <li>
        <a href="#introduction">Introduction</a>
    </li>
    <li>
        <a href="#history">History</a>
    </li>
    <li>
        <a href="#national-flags">National Flags</a>
    </li>
    <li>
        <a href="#signal-flags">International Maritime Signal Flags</a>
        <ul>
            <li>
                <a href="#letters">Maritime Signals: Letters</a>
            </li>
            <li>
                <a href="#numbers">Maritime Signals: Numbers</a>
            </li>
        </ul>
    </li>
</ul>

一切正常，期望子菜单上的导航位于中间更靠右的位置，但它应该位于左侧。

应该是怎样的形象:

Answer 1

将 .nav li ul 的填充设置为 0(或您喜欢的)。

nav li ul {
    display: none;
    position: absolute;
    top: 1em;
    left: 0;
    text-align: left;
    background: #5d2c2c;
    padding: 0;
}

http://jsfiddle.net/mppwY/