[html/css] probleem met hover op css content

[cyberstalker]

Ik heb een simpel css menutje gemaakt. Gewoon op de standaard manier, met geneste <ul>'s:

HTML:

<ul id="menu">
    <li><a href="" id="mnu_hoofdmenu">Hoofdmenu</a></li>
    <li>
        <a href="" id="mnu_modules">Modules</a>
        <ul>
            <li><a href="" id="mnu_nieuws">Nieuws</a></li>
            <li><a href="" id="mnu_fotoboek">Fotoboek</a></li>
            <li><a href="" id="mnu_nieuwsbrief">Nieuwsbrief</a></li>
            <li><a href="" id="mnu_zoekfunctie">Zoekfunctie</a></li>
            <li><a href="" id="mnu_vraagantwoord">Vraag &amp; Antwoord</a></li>
            <li><a href="" id="mnu_maillijst">Maillijst</a></li>
            <li><a href="" id="mnu_kalender">Kalender</a></li>
        </ul>
    </li>
    <li><a href="" id="mnu_layout">Layout</a></li>
    <li><a href="" id="mnu_tekstpaginas">Tekstpagina's</a></li>
    <li><a href="" id="mnu_gebruikers">Gebruikers</a></li>
    <li><a href="" id="mnu_instellingen">Instellingen</a></li>
    <li><a href="" id="mnu_beveiliging">Beveiliging</a></li>
    <li><a href="" id="mnu_help">Help</a></li>
</ul>

Met CSS zet ik de opties naast elkaar, en zorg ik voor een scheiding van de opties met een | :

Cascading Stylesheet:

ul#menu li:before
{
    content: ' |';
}

ul#menu li:first-child:before
{
    content: '';
}

Vervolgens laat ik bij een hover op de elementen een eventueel submenu zien:

Cascading Stylesheet:

ul#menu li:hover ul
{
    display: block;
}

Het probleem hierbij is dat het submenu ook al tevoorschijn komt als je over de | links van de optie hovert. Ik begrijp waarom dit gebeurt, maar ik kan absoluut geen oplossing bedenken om dit probleem op te lossen. Google en de GoT search leveren niets op.

[user109731]

Je kan a:hover gebruiken ipv li:hover, maar dan moet je ipv het kind z'n broertje laten weergeven .
Zoiets dus:

Cascading Stylesheet:

ul#menu li a:hover + ul {
    display: block;
}

Komt die 'adjacent sibling' selector ook nog eens van pas
Ik weet niet precies wat je verder allemaal gebruikt, dus of het werkt weet ik niet zo, maar ik verwacht het wel.

[ Voor 7% gewijzigd door user109731 op 19-05-2006 11:21 ]

[remcotolsma]

En wat als je het zo doet:

Cascading Stylesheet:

ul#menu li a:hover + ul {
    display: block;
}

Edit: Grote prutser was me voor

[ Voor 19% gewijzigd door remcotolsma op 19-05-2006 11:24 ]

[samo]

Als het goed is hovert heel jouw li, en niet jouw anchor tekst. Dus klopt het dat de | ook meehovert. Als je padding zou toepassen, hovert dat ook...

[user109731]

- reactie op een reeds aangepaste post

[ Voor 91% gewijzigd door user109731 op 19-05-2006 11:25 ]

[crisp]

tsja:

Cascading Stylesheet:

ul#menu li:before
{
    content: ' |';
} 

quote: http://www.w3.org/TR/CSS21/selector.html#before-and-after

The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content.

logisch dus, je insert geen content voor het element (dat zou hier zelfs invalid zijn aangezien UL enkel LI mag bevatten en geen content) maar binnen het element voor de rest van de content

[ Voor 24% gewijzigd door crisp op 19-05-2006 11:36 ]

[cyberstalker]

@Grote prutser: dat ik daar zelf niet op gekomen ben, ik schaam me diep . Het werkt i.i.g. prima .

@crisp: daar heb je gelijk in. Ik schreef ook dat ik wel begreep waarom het gebeurde, alleen niet hoe ik het kon oplossen.