How do I make a horizontal sitemap using UL?

I've been trying for hours now to figure out how to make a footer sitemap just like in开发者_如何学C 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?

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.

Do you mean something like this demo fiddle?

HTML:

<div id="footer">
    <ul>
        <li>
            <ul>
                <li>Color</li>
                <li>Red</li>
                <li>Blue</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>Fruit</li>
                ...

CSS:

#footer ul {
    list-style: none;
}
#footer>ul>li {
    float: left;
    width: 120px;
}
#footer ul li ul li:first-child {
    font-weight: bold;
}

If you look at their code, all you really need is

ul > li {
    float:left;
    width:140px;
}

that is to be applied to the first ul's li

fiddle: http://jsfiddle.net/jzpcW/