CSS Menu Puzzle: Horizontal menu, items L to R, but align menu R

  • Got a puzzle for you that I just can’t seem to solve.

    Start with a nice neat ordered list for our site’s main navigation menu, as in the nice default main menu in twentyten.
    Now I want to align the menu so that the items appear in order left to right, but so the total horizontal list of items appears aligned to the right.
    You could just say float:right instead of float:left on the list items, but then your list is backwards.
    You could also define a left margin to make it look like it’s in the correct place, but then you have no room for the user to add more items.

    https://jsfiddle.net/ub4ZM/1/

    There must be a good solution out there. Can you help?

Viewing 2 replies - 1 through 2 (of 2 total)

  • a link to your site would have helped more than this fiddle site;

    have you tried:

    #access .menu ul { float: right; margin-right:30px; }

    if this effects the ul ul, you may need to use an extra:
    #access .menu ul ul { float: none; }

    Thread Starter squarecandy

    (@squarecandy)

    Oh, awesome – thanks that worked. I really thought I tried that before, but I guess not or I was doing something wrong…

    Yeah, I posted the jsfiddle because I’m working on the site locally and I wanted a solution I could implement in several different places/situations.

    Anyways, thanks for your help alchymyth!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS Menu Puzzle: Horizontal menu, items L to R, but align menu R’ is closed to new replies.

Tags