float: right; on li without the elements being backwards?

I'm trying to create a tabbed menu bar. Essentially I try to create something like this without using a table:

<table> 
<tr><td>Some Title</td><td><ul><li>Menu Item 1</li><li>Menu Item 2</li></td></tr>
<tr><td colspan="2">Some Subtitle/Second Level Nav</td></tr>
</table>

So based on some tutorials, I have created that as some divs, with the ul and li styled like this:

#topBar ul li {
    float: right;
    border: 1px solid;
    border-bottom-width: 0;
    margin: 0 0 0 0.5em;
}

This works - the tabs are on the right. Except that they are backwards: The first tab/li is the rightmost.

I wonder, if there is a simple way to have right-aligned tabs in the correct order without having to reverse the order in the markup?

Just for reference, the complete HTML for this part:

<div id="topBar">
    <div id="topBarTitle">
    Some Title
    </div>
    <ul class="topBarTabs">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li class="selected"><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    </ul>    
</div>

<div id="subBar">
       Some Content that appears below the Navigation Tabs.
</div>