[css] ul li in kolommen

[Liqued]

Loop tegen het volgende issue aan. Ik heb de volgende output (ik kan alleen de stylesheet aanpassen, dus ik moet alles oplossen met css) vanuit een CMS:

HTML:

<ul>
    <li>
        hoofdmenu 1
        <ul>
            <li>submenu 1.1</li>
            <li>submenu 1.2</li>
            <li>submenu 1.3</li>
            <li>submenu 1.4</li>
            <li>submenu 1.5</li>
        </ul>
    </li>
    <li>
        hoofdmenu 2
        <ul>
            <li>submenu 2.1</li>
        </ul>
    </li>
    <li>
        hoofdmenu 3
    </li>
    <li>
        hoofdmenu 4
    </li>
</ul>

Nu is het doel dat hooftmenu items in kolommen komen met daaronder de sub menu items. Ik heb het hier onder proberen weer te geven.

HTML:

hoofdmenu 1     |       hoofdmenu 2     |       hoofdmenu 3     |       hoofdmenu 4
submenu 1.1     |       submenu 2.1     |                           |
submenu 1.2     |                           |                           |
submenu 1.3     |                           |                           |
submenu 1.4     |                           |                           |
submenu 1.5     |                           |                           |

Nu ben ik veel opties tegen gekomen met floats, maar niks lijkt goed te passen (krijg het alleen voor elkaar in rijen en niet in kolommen). Kunnen jullie mij helpen?

[MueR]

Zo moeilijk is dat toch niet? Hoofdmenu horizontaal maken moet je toch lukken. Children vervolgens relatief tenopzichte van parent positioneren. Ik mis een beetje wat je zelf geprobeerd hebt. Zet eens een testcase van je probeersel online, of post hier wat relevante css.

[OkkE]

Dit is toch wel heel erg basic. Elke <li> een float en width geven, vervolgens de <li> van sub's niet floaten.

[Pendaco]

^^ With stupid

Met de volgende CSS moet je al een heul heul heel eind komen;

Cascading Stylesheet:

ul {
    padding: 0;
}
ul li {
    width: 150px;
    float: left;
    list-style: none;
}