サブメニューを左にドロップするにはどうすればいいですか？

Question

次のコードは、私が取り組んでいるWordPressテーマCSSファイルのものです。サブメニューは親の右側に表示されていましたが、「left：0;」で追加しました。 cssコードの最初のブロックで、それはそれが親メニューの左側とそれ自身を整列させるようになりました（そして、そのようにドロップダウンの上に座っています）。

サブメニューが親の左側に表示されるようにコードを変更するにはどうすればよいですか？

/* =DROP DOWN 
----------------------------------------------- */ 
.main-navigation ul li ul, 
.main-navigation ul li:hover ul ul, 
.main-navigation ul ul li:hover ul ul, 
.main-navigation ul ul ul li:hover ul ul, 
.main-navigation ul ul ul ul li:hover ul ul { 
    display: none; 
     left: 0; 
    position: absolute; 
    z-index: 9999; 
} 
.main-navigation ul li:hover ul, 
.main-navigation ul ul li:hover ul, 
.main-navigation ul ul ul li:hover ul, 
.main-navigation ul ul ul ul li:hover ul, 
.main-navigation ul ul ul ul ul li:hover ul { 
    display:block; 
} 
.main-navigation ul li ul { 
    position: absolute; 
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8); 
    border-top: 1px solid #0FBE7C; 
    top: 45px; 
    left: 25px; 
    width: 150px; 
} 
.main-navigation ul li ul li { 
    float: none; 
    border-bottom: 1px solid #EAEAEA; 
    padding: 0; 
} 
.main-navigation ul li ul li a, 
.main-navigation ul li.current-menu-item ul li a, 
.main-navigation ul li ul li.current-menu-item a, 
.main-navigation ul li.current_page_ancestor ul li a, 
.main-navigation ul li.current-menu-ancestor ul li a, 
.main-navigation ul li.current_page_item ul li a { 
    float: none; 
    line-height: 21px; 
    font-size: 13px; 
    font-weight: normal; 
    height: 100%; 
    padding: 6px 10px; 
    color: #666666; 
} 
.main-navigation ul li ul li a:hover, .main-navigation ul li ul li:hover > a, .main-navigation ul li.current-menu-item ul li a:hover { 
    background: none repeat scroll 0 0 rgba(255, 255, 255, 1); 
    color: #0FBE7C; 
} 
.main-navigation ul li ul li ul { 
    left: 150px; 
    top: -1px; 
} 
.main-navigation select { 
    display: none; 
} 

Answer 1

代わりleft: 0;

の使用right: 0を今すぐサブメニューの右側が親に整列されます。