I would like style the main horizontal Wordpress menu so that the first 3 items are aligned to the left and the last 3 items are aligned to the right.
This will create the appearance of two menus (with login, etc., on the right) but make it easy to restyle it to create a responsive menu with the last three items at the bottom.
<UL> <li>1a</li><li>2a</li><li>3a</li> <-left right-> <li>4a</li><li>5a</li><li>6a</li> </UL>
Using float left and right causes the last 3 items to change order, I need them to stay in order.
I would like a solution that does not require creating a separate menu or changing the order of the menu items to make the float:right put them back in the right order.
I have tried various combinations of display:inline-block and text-align:left/right, with no luck.
EDIT: I would like to do this without adding markup into the menu itself. (Unless the answer also illustrates how to add markup into a Wordpress horizontal menu.)