How to change the order floated elements?

Question

I hardly use float:right in my css and now I did and came across a annoying problem. I am floating my menu items to the right

my HTMl

    <ul id="extMenu">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Feedback</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>

my CSS

    #extMenuBlock {
    }
        #extMenuBlock ul#extMenu { 
            list-style:none;
            padding:0;
            margin:0; 
        }
        #extMenuBlock ul#extMenu li { 
            float:right;
            padding:5px; 
        }

Now when the items are float, I receive my menu is this order Contact Feedback Home, but I want them in opposite order ie Home Feedback Contact

Answer 1

Using display: inline on <li>'s can cause problems, especially if you're eventually going for dropdown menus. I'd recommend something similar to this (only floats show, you know what other styles you want to add):

#extMenu { float: right; }
#extMenu li { float: left; }

So the menu itself will float to the right, while the menu items will float to the left.

Another solution would be to simply reverse the order of your <li>'s

Answer 2

Try this

ul#extMenu {
    list-style: none;
    padding: 0;
    margin: 0;
    float: right;
}
ul#extMenu li {
    display: inline;
    padding: 5px;
}