[html/css2] non-javascript menu probleempje

[MekZi]

#Ik weet niet precies hoe ik het moest omschrijven (titel).

Ik ben op het moment bezig om een thema te maken voor Wordpress. Ik ben daarom eerst even in puur html/css bezig de website op te zetten (is op het moment dus maar 1 pagina, met geen werkende links).

Nu kwam ik vandaag echter achter dat de menu niet werkt zoals gedacht. Als je namelijk met de cursor over de menu opties gaat (1ste laag), dan veranderen ze van kleur. Maar wanneer je in een sub-menu bent, veranderd de parant hover kleur weer naar non-hover (dus gaat weer van grijs naar wit).

Is er een manier om de kleur van de parant op grijs te laten wanneer je in de sub-menu zit?

Ik heb de pagina online gezet: beta [dot] qmodo [dot] nl

Wanneer je via de bron naar de css file gaat kun je het volgende met ctrl+f zoeken "ul.nav". Daar vindt je alle menu gerelateerde css.

En oja, ik wil dit graag bereiken met css2 zonder hulp van javascript.

[CurlyMo]

Dat kan wel, bijv. door te zorgen dat je submenu een child wordt van je hoofdmenu:

HTML:

<div class="menu">
    <div class="item">Menu 1
        <div class="submenu">
            <div class="item">Submenu 1</div>
        </div>
    </div>
</div>

Als je de submenu hovert, dan hover je gelijk het hoofdmenu.

[MekZi]

Dat is toch niet anders dan wat ik nu doe? Tenminste qua html.

HTML:

<ul class="nav">
    <li><a href="#" class="selected">Home</a></li>
    <li>
        <a href="#">Categorie »</a>
        <ul>
            <li><a href="#">Bedrijfsadministratie</a></li>
            <li><a href="#">Fiscaal en juridisch recht</a></li>
            <li><a href="#">Marketing/PR</a></li>
            <li><a href="#">Administratieve Organisatie</a></li>
            <li><a href="#">Overige</a></li>
        </ul>
    </li>
    <li><a href="#">Grid</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">Contact</a></li>
</ul> <!-- end ul.nav -->

[CurlyMo]

Dat ligt eraan waar je hover zit (zie classes).

MekZi schreef op vrijdag 12 oktober 2012 @ 00:08:

HTML:

<ul class="nav">
    <li><a href="#" class="selected">Home</a></li>
    <li class="DitWerkt">
        <a class="DitWerktNiet" href="#">Categorie »</a>
        <ul class="DitWerktNiet">
            <li><a href="#">Bedrijfsadministratie</a></li>
            <li><a href="#">Fiscaal en juridisch recht</a></li>
            <li><a href="#">Marketing/PR</a></li>
            <li><a href="#">Administratieve Organisatie</a></li>
            <li><a href="#">Overige</a></li>
        </ul>
    </li>
    <li><a href="#">Grid</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">Contact</a></li>
</ul> <!-- end ul.nav -->

[MekZi]

Aah ik snap je. En ik zie nu in waarom dit dus niet werkt Tnx, even kijken of ik hem nu werkent krijg. Zal dit dan weer updaten (incl. de site).

edit:
hopsakee! Het is gelukt (zie beta [dot] qmodo [dot] nl). Hij werkt nu zoals ik hem in eerste instantie wilde hebben . Nu nog even kijken of ik onnodige classes kan weghalen (css optimaliseren). Tnx!

edit:
klopt Het is [dot] niet [at]

[ Voor 47% gewijzigd door MekZi op 12-10-2012 13:01 ]

[TheNephilim]

Je bedoelt vast [dot] in plaats van [at]