对齐下拉菜单

的右边缘我从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列”（而不是下拉菜单的左边缘与父级对齐）。

权利的否定位置的意义是什么？通常，左/右的负值具有隐藏元素的目的，就像下拉菜单发生的那样，即它们通常由于负向左而隐藏，并且在左侧不再为负向时显示。

来源

2013-04-14 Md. Reazul Karim

听起来像是你回答自己的问题。目的是确保右边与父对齐正确。 – JJJ

如果用0代替-1，会发生什么情况？ – asifrc

它不再是内联。你为什么要删除这个样式？ – bukka

我得到了解决，请检查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; }

来源

2013-10-09 05:10:49 Adil

这是一个令人惊讶的简单解决方案。 –

我投了票，因为它确实是一个很好的答案。然而，这对我来说并不合适，因为我需要箭头到右边......任何建议？ – Pere

对齐下拉菜单

回答

相关问题