Horizontal menu: how to float right but keep the menu items in the correct order?

Question

I'm using float: right for my horizontal menu (.drop_menu li) as I want the menu to be aligned to the right side of the screen (and logo to the left side). It works OK, the only issue is that my menu items are now in the wrong order (Link 3 then Link 3 then Link 1 instead of the opposite). Is there a way to fix that? Many thanks

http://jsfiddle.net/eLSbq/

<div class="header">
<div class="logo">Logo</div>                            
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    </ul>
</li>
<li><a href='#'>Link 2</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
<li><a href='#'>Link 3</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
</ul>
        </div>


.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; }

Answer 1

Remove float:right from li which prevent the reverse order.

Add float:right to the ul's .dropdown class which put your entire menu at right side.

Add float:left to the li which helps your sub-menu to stay align.

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

Js Fiddle Demo