Горизонтальная навигация ul выровнена вправо side

Я пытаюсь создать горизонтальную навигацию, которая выровнена по правой стороне родительского элемента. Вы можете увидеть навигацию по адресу http://kaffeeprinzen.jag-aelskar.de/ , где написано «Эспрессо».

Мой HTML:

    
Item 4
    
Item 3
    
Item 2
    
Item 1

Мой CSS:

.menu li { 
    float: right;
    margin-left: 20px;
}

Он работает следующим образом, единственная проблема в том, что порядок в списке неправильный. Первый элемент - последний в html-коде.

Есть какие-нибудь советы? Большое спасибо! Яннис