水平菜单:如何向右浮动但保持菜单项的顺序正确？

我正在使用float: right我的水平菜单(.drop_menu li),因为我希望菜单对齐到屏幕的右侧(和徽标在左侧).它工作正常,唯一的问题是我的菜单项现在的顺序错误(链接3然后链接3然后链接1而不是相反).有办法解决这个问题吗？非常感谢

http://jsfiddle.net/eLSbq/

Logo
                            

Link 1
    

    
Sub Link 1
    
Sub Link 2
    

Link 2
    

    
Sub Link 1
    
Sub Link 2
    
Sub Link 3
    
Sub Link 4
    

Link 3
    

    
Sub Link 1
    
Sub Link 2
    
Sub Link 3
    
Sub Link 4
    


        


.header {
    width: 100%;
    background: #fff;
    color: #124191;
    font-weight: 300;
    font-size: 28px;
    height: 120px;
    display: table;
     position: fixed;
        z-index: 999999;
        opacity: 0.7;
    background: aqua;
}

.logo {
display: inline-block;
vertical-align: middle;
left:0;
color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
background: red;
}

 .drop_menu {
    padding:0;
    margin:0;
    list-style-type:none;

    right: 0;
    display: table;
    z-index: 3000;
       display: table-cell;
    vertical-align: middle;
    right: 0;

}


.drop_menu li { display: table-cell;
    vertical-align: middle; float: right;}

.drop_menu li a {
    padding:9px 20px;
    display:block;
    color:#666;
    text-decoration:none;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;



}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }

Sachin.. 12

float:right从中删除li阻止相反的顺序.

添加float:right到ul的.dropdown课程,将整个菜单放在右侧.

添加float:left到li它可以帮助您的子菜单保持对齐.

.drop_menu {
    float: right;  
}
.drop_menu li { 
    display: table-cell;
    vertical-align: middle;
    float:left;
}

Js Fiddle演示