Horizontal ul navigation aligned to the right side

Question

i'm trying to create a horizontal navigation which is aligned to the right side of the parent element. You can see the navigation at http://kaffeeprinzen.jag-aelskar.de/ where it says "Espresso".

My HTML is:

<ul id="menu-standard">
    <li id="menu-item"><a>Item 4</a></li>
    <li id="menu-item"><a>Item 3</a></li>
    <li id="menu-item"><a>Item 2</a></li>
    <li id="menu-item"><a>Item 1</a></li>
</ul>

My CSS is:

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

It works like this, the only problem is that the order in the list is wrong. The first item is the last one in the html code.

Any tips for me? Thanks a lot! Yannis

Answer 1

Try floating the ul right rather than each li. Each li can float left.

#menu-standard { 
    float: right;
}

#menu-standard li { 
    float: left;
}

Example: http://jsfiddle.net/hunter/HsUTQ/

---

float: right will float the items, in order, to the right. Meaning the 1st element will be the right-most, then 2nd element the next-right-most, etc.