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