Different menu style

[nvp007]

For a non-paying job (website creation of a school) i'm trying to make an different kind of menu. An example is found at http://tinyurl.com/345n7ln (this one is static, not controlled by CMSMS for example purposes)



I'm using the following html code, so the CMSMS menu template should output this:

Code: Select all

<div class="cat"><div class="cathead">Algemeen</div>
<div class="catitems">
<ul>
	<li><a href="index.php?page=Algemeen">Kennismaking</a></li>

    <li><a href="index.php?page=Algemeen">Opvoedingsproject</a></li>
    <li><a href="index.php?page=Algemeen">Geschiedenis</a></li>
    <li><a href="index.php?page=Algemeen">Contactinfo</a></li>
    <li><a href="index.php?page=Algemeen">BSA</a></li>
    <li><a href="index.php?page=Algemeen">BSD</a></li>
    <li><a href="index.php?page=Algemeen">KSB</a></li>

    <li><a href="index.php?page=Algemeen">Zwitserlandkampen</a></li>
    <li><a href="index.php?page=Algemeen">Oud-leerlingenbond</a></li>
</ul>
</div></div>
<div class="cat"><div class="cathead">Humaniora</div>
<div class="catitems">
<ul>
	<li><a href="index.php?page=Algemeen">Studieaanbod</a></li>
    <li><a href="index.php?page=Algemeen">Jaarkalender</a></li>

    <li><a href="index.php?page=Algemeen">Dagindeling</a></li>
    <li><a href="index.php?page=Algemeen">Dagelijkse werking</a></li>
    <li><a href="index.php?page=Algemeen">Schoolraden</a></li>
    <li><a href="index.php?page=Algemeen">Engagement</a></li>
    <li><a href="index.php?page=Algemeen">Cultuurmozaïk</a></li>
    <li><a href="index.php?page=Algemeen">Schoolreglement</a></li>

    <li><a href="index.php?page=Algemeen">Inschrijving</a></li>
</ul>
</div></div>
<div class="cat"><div class="cathead">Internaat</div>
<div class="catitems">
<ul>
	<li><a href="index.php?page=Algemeen">Kennismaking</a></li>
    <li><a href="index.php?page=Algemeen">Praktisch</a></li>
    <li><a href="index.php?page=Algemeen">Dagindeling</a></li>

    <li><a href="index.php?page=Algemeen">Personalia</a></li>
    <li><a href="index.php?page=Algemeen">Internaatsactiviteiten</a></li>
    <li><a href="index.php?page=Algemeen">Inschrijving</a></li>
</ul>
</div></div>

In this example the is the name of the 1st-layer of the menu (like a dropdown menu, and outputted like the grey-backgrounded text above the menu items in the image). All items below it (between tags) are 2nd-layer menu items.

There is no need to differentiate between already visited links, dividers,... The menu should just look like in the example, plain and simple.


I've been trying to achieve this for hours now, but always there is something that isn't quite right. Can someone help me please?

Thanks by advance!

[Dr.CSS]

You can do this w/o having to use div, as the top menu item would/could be parent class that will take the style you want then you just style the second level as needed, I could do this...