Superfish menu aligned right

Question

I am trying to configure superfish to show up in the way I want. Everything looks good so far, only that I want the menu to be aligned right. This works also but now all my menu items are mirrored, so no longer in the order I want...

Have a look: http://web288.merkur.ibone.ch/klingler_ag/

Home should be the first item on the left but with the whole menu aligned to the right.

What I did is float:right in the .sf-menu li

.sf-menu li {   
    line-height: 50px;
    margin: 0px;
    padding: 0px;
    list-style: none;
    float:right;
}

Is this not what I should be doing?

Thank you!

Answer 1

Floating right means, that each element gets floated to the most right position it can be. Because the HTML code is interpreted top to bottom, this "turns" the order.

You should float: right the menu container instead of the items. First, make sure the block elements respect the floating content with:

.ym-wbox:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

Then apply the floating:

.sf-menu {
    float: right;
}

.sf-menu li {
    float: left;
}

Answer 2

float:right the container, then text-align:right the links.

Answer 3

Try this:

.sf-menu {
    height: 45px;
    margin: 0;
    padding: 0;
    text-align: right; /* ADDED THIS */
}

.sf-menu li {
    background: none repeat scroll 0 0 #DB0000;
    display: inline-block;
    /* float: left; HID THIS */
    line-height: 50px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    display:inline-block; /* ADDED THIS*/
}
.sf-menu li {
    /* float: left; HID THIS */
    position: relative;
    width: auto;
}