Why menu created with ul li elements displayed in reverse order?

Question

I have created a menu using ul and li, but it shows me in reverse order. For example:

FAQ PRICING TOUR HOME instead of the expected HOME TOUR PRICING FAQ

.header ul {

}
.header li {
   list-style-type: none;
   margin-left: 40px;
   float: right;
}

<div class="header">
   <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">TOUR</a></li>
      <li><a href="">PRICING</a></li>
      <li><a href="">FAQ</a></li>
   </ul>
</div>

What's wrong in my code?

Answer 1

You should float only the ul right. The list items should be floated left in the correct (expected) order:

.header ul {
    float:right;
}

// expected order. It's the default value if not overriden,
// therefore it is not realy needed
.header li
{
    float:left;
}