Pure CSS dropdown navigation dropdown to the left

Question

I have CSS code like this:

.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;
}

The HTML part looks like this:

<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>

Everything is working OKAY expect the navigation on sub menu is on the in the middle more to the right, but it should be on the left.

The image of how it should be:

Answer 1

Set the padding of .nav li ul to 0 (or to your liking).

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

http://jsfiddle.net/mppwY/