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;
}