Горизонтальное меню: как плавать вправо, но сохранить пункты меню в правильном порядке?

Я использую float: right для своего горизонтального меню (.drop_menu li), поскольку я хочу, чтобы меню было выровнено в правой части экрана (и логотип слева). Он работает нормально, единственная проблема заключается в том, что мои пункты меню находятся в неправильном порядке (ссылка 3, затем ссылка 3, а затем ссылка 1 вместо противоположного). Есть ли способ исправить это? Большое спасибо

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

Ответ 1

Удалите 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

Ответ 2

Добавьте еще один элемент div вокруг пунктов меню и установите float вправо

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

Удалить float прямо из следующего класса

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

для демонстрации нажмите ссылка jsfiddle

Ответ 3

`flex` решение: -

Вот что сработало для меня:

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>

Ответ 4

Попробуйте это...

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

В результате получается LINK 1 LINK 2 LINK 3 и уменьшает ширину ссылок подменю. Он работает.

Ответ 5

Поверните <ul> вправо, а затем поместите его элементы <li> влево.