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

一切工作OKAY期望子菜單上的導航在中間更靠右，但它應該在左邊。

的就應該是這樣的形象：

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/