Support » Themes and Templates » How do I get an upside-down list?

  • I have this great website design and I’m just doing the photoshop->html transition.
    So now I’m wondering, how do I make my subpPages be listed ON TOP OF the parent Page?

    – subpage3
    – subpage2
    – subpage1



Viewing 4 replies - 1 through 4 (of 4 total)
  • I’d use the NAVT Plugin – this way you can actually designate any order you want for pages to appear in navigation.

    NAVT gives you lots and lots of class hooks to work with too.

    I would suggest that from a semantics point of view you should still aim to be using nested lists (which NAVT will do for you)

    You’ll need to do some css absolute positioning to get the PARENT at the bottom though.

    So you might have

    <ul class="menu">
    <li class="parentpage"><h2>PARENT PAGE</h2>
    <li class="subpage">Sub Page 3</li>
    <li class="subpage">Sub Page 2</li>
    <li class="subpage">Sub Page 1</li>

    Then your fun with CSS begins, in that you’ll need something like {
    display: block;
    height: 80px;
    width: 50px;
    position: relative;
    .parentpage h2 {
    position: absolute;
    bottom: 0;
    width: 50px;
    height: 20px;
    .parentpage ul {
    display: block;
    height: 60px;
    width: 50px;
    .parentpage ul li {
    display: block;
    height: 20px;

    Now that’s just completely off the top of my head, but I’m sure it’s workable..

    I’m off for some dinner…

    Good luck!

    Cool, thanks for the extensive help. I might need to use NAVT anyways since my menu turns out to be a healthy mix of Pages and categories.

    Absolute positioning means fixed heights I’m afraid … I was planning on making the thing extra flexible.

    Well, I’ll post my findings here 🙂

    Thanks again.

    I’ll be intrigued to see the results. I’ve always liked NAVT for the ability to just put any menu item anywhere on the page, and he gives such a well thought out set of classes that you can pretty much style for any given occasion.

    Good luck!

    OKay, I still didn’t get around to finishing our website.
    But I did some fiddling just now and you can solve this with negative topmargins.

    <ul class="upsidedown"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li></ul>
    .upsidedown li {margin-top:-30px;}

    I also found this:
    Not sure I like the div way

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How do I get an upside-down list?’ is closed to new replies.