title: Horizontal menu: how to float right but keep the menu items in the correct order?
body: <p>I'm using <code>float: right</code> 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</p>
  
  <p><a href="http://jsfiddle.net/eLSbq/" rel="noreferrer">http://jsfiddle.net/eLSbq/</a></p>
  
  <pre><code>&lt;div class="header"&gt;
  &lt;div class="logo"&gt;Logo&lt;/div&gt;                            
  &lt;ul class="drop_menu"&gt;
  &lt;li&gt;&lt;a href='#'&gt;Link 1&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href='#'&gt;Sub Link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;Sub Link 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href='#'&gt;Link 2&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href='#'&gt;Sub Link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;Sub Link 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;Sub Link 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;Sub Link 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href='#'&gt;Link 3&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href='#'&gt;Sub Link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;Sub Link 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;Sub Link 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;Sub Link 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
          &lt;/div&gt;
  
  
  .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; }
  </code></pre>