CSS dropdown probleem persistent hover

[Verwijderd]

Hallo allemaal,

ik ben bezig met mijn eerste dropdown menu volledig met html en CSS. Hij doet bijna alles wat ik wil maar ik loop tegen een vervelend probleem aan. Als ik hover over een menu-item dan komen de subpagina's naar voren.
Alleen als ik iets wil selecteren verdwijnen ze weer.

Ik heb veel gelezen over persistent hover maar ik krijg het niet aan de praat. Zowel met javascript als CSS lukt het niet. Als het even mogelijk is doe ik het ook liever zonder javascript.

Een voorbeeldje is te zien op demo.osdoi.com. Op het moment zit er alleen een submenu onder 'over de school'.

Mijn html is (sorry komt uit wordpress):

code:

<ul id="menubar">
            <li class="page_item page-item-5"><a href="http://osdoi.com/demo/?page_id=5" title="Home">Home</a></li>
<li class="page_item page-item-7"><a href="http://osdoi.com/demo/?page_id=7" title="Over de school">Over de school</a>
<ul class='children'>
    <li class="page_item page-item-10"><a href="http://osdoi.com/demo/?page_id=10" title="Algemene informatie">Algemene informatie</a></li>
    <li class="page_item page-item-12"><a href="http://osdoi.com/demo/?page_id=12" title="Onze groepen">Onze groepen</a></li>
    <li class="page_item page-item-14"><a href="http://osdoi.com/demo/?page_id=14" title="Leerlingen aanmelden">Leerlingen aanmelden</a></li>
</ul>
</li>
<li class="page_item page-item-17"><a href="http://osdoi.com/demo/?page_id=17" title="Het team">Het team</a></li>
<li class="page_item page-item-24"><a href="http://osdoi.com/demo/?page_id=24" title="De schoolgids">De schoolgids</a></li>
<li class="page_item page-item-19"><a href="http://osdoi.com/demo/?page_id=19" title="Nieuws">Nieuws</a></li>
<li class="page_item page-item-26"><a href="http://osdoi.com/demo/?page_id=26" title="Contact">Contact</a></li>
            </ul>

Mijn CSS is:

code:

#menudiv{
    width:300px;
    text-align:left;
}

#menubar{
    position:absolute;
    bottom:0;
    right:10px;
    margin:0;
    padding:0;
    
}

#menubar li{
    float:left;
    list-style:none;
    }

#menubar li a{
    color:#0e217f;
    text-decoration:none;
    padding:2px 17px;
    margin-left:0px;
    margin-right:5px;
    display:block;
    font-family:calibri;
    font-size:20px;
}

#menubar li a:hover{
    background-color:#0e217f;
    color:#c2ddf6;
}

#menubar li ul{
    display:none;
}

#menubar li:hover ul{
    position:absolute;
    display:inline;
    visibility:visible;
    left:0;
    width:100%;
    margin:0;
    padding:0;
}

#menubar li:hover li{
    float:left;
    }

#menubar li:hover li a {
    color:#fff;
}

Hebben jullie advies?

[OkkE]

Je zou eens kunnen proberen die #menubar niet (op die manier) absoluut te positioneren.

[Verwijderd]

dank je Okke, het is gelukt

[C0rnelis]

Hoi eddioot,

misschien is het een idee om de oplossing/uiteindelijke css ook te posten als nieuw bericht zodat je in de toekomst misschien ook anderen hiermee kunt helpen. Dat zou je zelf waarschijnljik ook prettiger vinden als je zoiets tegenkomt, nietwaar?