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/