How do I make a horizontal sitemap using UL?

Question

I've been trying for hours now to figure out how to make a footer sitemap just like in this webpage www.telia.dk (in the bottom) using CSS and UL/LI.

I'm a CSS noob, so please help me out.

Here's an example tree...

<ul>
    <li>
        <ul>
            <li>Color/li>
            <li>Red</li>
            <li>Blue</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Fruit</li>
            <li>Apple</li>
            <li>Banana</li>
            <li>Lemon</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Weekdays</li>
            <li>Monday</li>
            <li>Friday</li>
            <li>Saturday</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Numbers</li>
            <li>1</li>
            <li>2</li>
        </ul>
    </li>
</ul>

Any idae how to make my UL above look like the one at the bottom of www.telia.dk?

Answer 1

One possible way is something like this (.hMenu is the outer ul here):

.hMenu > li { /* for direct childs (>) of .hMenu that are li-s */
    /* inline-block will make them inline but also block - the best of both :) */
    display: inline-block; 
    /* they will align themselves to each other's top */
    vertical-align: top; 
    /* just a little horizontal margin */
    margin: 0 10px; 
}
.hMenu ul li:first-child { /* for the first li-s in inner ul-s */
     /* we make them bold */
     font-weight: bold; 
}

jsFiddle Demo

Please note that this is not something that can be readily used in production, it certainly won't work in IE6/7. You can find great compatibility tables on Quirksmode.

Instead of display: inline-block; you can also consider using floats.