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

flex solution:-

This is what worked for me:

ul {
       display: flex;
       justify-content: flex-end;
     }
    
    
 ul li {
   outline: 2px violet solid;
   display: list-item;
   list-style: none;
   padding: 10px;
   margin: 0 5px;
 }

ul li:hover {
   outline: 2px deeppink solid;
   cursor: pointer;
 }

<div>
      <h1>Hello World....</h1>
      <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
      </ul>
    </div>

Here is the fiddle: https://jsfiddle.net/appsparkler/emjst7f3/4/

Good Luck...

Add one more div around menu items and set float to right

<div style='float:right'>
<!-- put menu controls here -->
</div>

Remove float right from following class

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

for demo click on jsfiddle link

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