下拉菜單沒有正確對齊

Question

我有一個下拉菜單按鈕，僅在屏幕太小時顯示。我需要將它對齊到右側，但float:right;不起作用。

http://jsfiddle.net/VZ9y8/

這裏的CSS：

#cssmenu ul, 
#cssmenu li, 
#cssmenu span, 
#cssmenu a { 
    margin: 0; 
    padding: 0; 
    position: relative; 

} 
#cssmenu { 
    height: 49px; 
    border-radius: 5px 5px 0 0; 
    -moz-border-radius: 5px 5px 0 0; 
    -webkit-border-radius: 5px 5px 0 0; 
    background: #fefefe; 
    background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0)); 
    background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
    background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
    background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
    background: linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
    border-bottom: 2px solid #ffffff; 
    width: auto; 
    display:block; 
} 
#cssmenu:after, 
#cssmenu ul:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 
#cssmenu a { 
    background: #fefefe; 
    background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec)); 
    background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%); 
    background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%); 
    background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%); 
    background: linear-gradient(top, #fefefe 0%, #ececec 100%); 
    color: #000; 
    display: inline-block; 
    font-family: Helvetica, Arial, Verdana, sans-serif; 
    font-size: 12px; 
    line-height: 49px; 
    padding: 0 20px; 
    text-decoration: none; 
} 
#cssmenu ul { 
    list-style: none; 
} 
#cssmenu > ul { 
    float: left; 
} 
#cssmenu > ul > li { 
    float: left; 
} 
#cssmenu > ul > li > a { 
    color: #000000; 
    font-size: 12px; 
} 
#cssmenu > ul > li:hover:after { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    /* Stile con freccia bassa 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid #ffffff; 
    */ 
    margin-left: -10px; 
} 
#cssmenu > ul > li:first-child > a { 
    border-radius: 5px 0 0 0; 
    -moz-border-radius: 5px 0 0 0; 
    -webkit-border-radius: 5px 0 0 0; 
} 
#cssmenu > ul > li.active:after { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    /* Stile con freccia bassa 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid #ffffff; 
    */ 
    margin-left: -10px; 
} 
#cssmenu > ul > li.active > a { 
    -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
    background: #ececec; 
    background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef)); 
    background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
    background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
    background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
    background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
} 
#cssmenu > ul > li:hover > a { 
    background: #ececec; 
    background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef)); 
    background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
    background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
    background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
    background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
    -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
} 
#cssmenu .has-sub { 
    z-index: 2; 




} 
#cssmenu .has-sub:hover > ul { 
    display: block; 


} 
#cssmenu .has-sub ul { 
    display: none; 
    position: absolute; 
    width: 200px; 
    top: 100%; 
    left: 0; 
} 
#cssmenu .has-sub ul li { 
    *margin-bottom: -1px; 
} 
#cssmenu .has-sub ul li a { 
    background: #ffffff; 
    border-bottom: 1px dotted #ffffff; 
    filter: none; 
    font-size: 11px; 
    display: block; 
    line-height: 120%; 
    padding: 10px; 
    color: #000000; 
} 
#cssmenu .has-sub ul li:hover a { 
    background: #e6e6e6; 
} 
#cssmenu .has-sub .has-sub:hover > ul { 
    display: block; 
} 
#cssmenu .has-sub .has-sub ul { 
    display: none; 
    position: absolute; 
    left: 100%; 
    top: 0; 
} 
#cssmenu .has-sub .has-sub ul li a { 
    background: #e6e6e6; 
    border-bottom: 1px dotted #ffffff; 
} 
#cssmenu .has-sub .has-sub ul li a:hover { 
    background: #d9d9d9; 
} 

對齊只能如果我添加right:-50px，但它不是一個安全的解決方案。

Answer 1

只需添加這兩個屬性：

當你ul是屏幕的100％，那麼float:right工作

#cssmenu .has-sub { 
    float:right; 
} 

在這裏看到你的代碼http://jsfiddle.net/VZ9y8/3/