LI elements have float left to be aligned to the right in a container?

Question

In this code the LI elements have float:left and are aligned to the left of the container. I want to make them aligned to the right. How do I do this with CSS?

For example: [..................................Item1.Item2]

Here is the HTML code:

<div class="menu">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
  </ul>
</div>

P.S. The order of LI's must not be reverse.

Answer 1

Try this

<div class="menu">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
  </ul>
</div>

CSS

.menu
{ float:right;
}
.menu li
{ float:left;
}

Or Use float:right to ul like

.menu ul
{ float:right;
}
.menu li
{ float:left;
} 

JSFiddle Example