html list items changing order

Question

 

Below I am trying to find out why when I tell list items ir menu to float right. The menu items reverse order like Blog, About, Contact, and then Home.

But if I say float left its correct. Its comes out as Home, Contact, About, and Blog which is the correct order. 

Cand someone explain and help me fixed this. I want to float menu right with out list items changing order

<div id="menu" >

       <ul >  

               <li class="active">   <a href=" ">  <span> Home</span> </a> </li>

               <li>   <a href=" ">  <span>Contact</span> </a> </li>

               <li>   <a href=" ">  <span> About</span> </a> </li>

               <li>   <a href=" ">  <span> Blog</span> </a> </li>

      </ul >

</div>