2013-04-14 208 views
0

的右邊緣我從here下面的代碼生成一些脂肪菜單:對齊下拉菜單

<ul id="menu"> 

     <li class="menu_right"><a href="" class="drop">1 column</a> 
      <div class="dropdown_1column align_right"> 

        <div class="col_1"> 

         <ul class="simple"> 
          <li><a href="#">FreelanceSwitch</a></li> 
          <li><a href="#">Creattica</a></li> 
          <li><a href="#">WorkAwesome</a></li>        
         </ul> 

        </div> 

      </div> 
     </li></ul> 

的風格是:

#menu .menu_right { 
    float: right; 
    margin-right: 0px; 
} 
#menu li .align_right { 
    /* Rounded Corners */ 
    -moz-border-radius: 5px 0px 5px 5px; 
    -webkit-border-radius: 5px 0px 5px 5px; 
    border-radius: 5px 0px 5px 5px; 
} 
#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns, 
#menu li:hover .dropdown_4columns, 
#menu li:hover .dropdown_5columns { 
    left: -1px; 
    top: auto; 
} 
#menu li { 
    float: left; 
    display: block; 
    position: relative; 
    padding: 4px 10px 4px 10px; 
    margin-right: 30px; 
    margin-top: 7px; 
    border: none; 
} 
#menu li:hover { 
    border: 1px solid #777777; 
    padding: 4px 9px 4px 9px; 
    -moz-border-radius: 5px 5px 0px 0px; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
} 
#menu li a {   
    display: block; 
    outline: 0;  
} 

如果right:-1px;#menu li:hover .align_right刪除,則下拉菜單的右邊緣不再與父級的右邊緣對齊,即菜單欄中的「1列」(而不是下拉菜單的左邊緣與父級對齊)。

權利的否定位置的意義是什麼?通常,左/右的負值具有隱藏元素的目的,就像下拉菜單發生的那樣,即它們通常由於負向左而隱藏,並且在左側不再爲負向時顯示。

+0

聽起來像是你回答自己的問題。目的是確保右邊與父對齊正確。 – JJJ

+0

如果用0代替-1,會發生什麼情況? – asifrc

+0

它不再是內聯。你爲什麼要刪除這個樣式? – bukka

回答

3

我得到了解決,請檢查http://jsfiddle.net/v4Jwu/

HTML

<select> 
<option value="1">Client: Zac Brown Band</option> 
<option value="2">Saab</option> 
<option value="3">Mercedes</option> 
<option value="4">Audi</option> 
</select> 

CSS

select { direction: rtl; } 
+0

這是一個令人驚訝的簡單解決方案。 –

+0

我投了票,因爲它確實是一個很好的答案。然而,這對我來說並不合適,因爲我需要箭頭到右邊......任何建議? – Pere