Hoe maak ik een dropdown list in css/html (zoals in voorbeeld)?

Het knmi heeft sinds kort een nieuwe website online, daarin zit een element dat ik graag op mijn website zou gebruiken. Het is een dropdown menu gemaakt met een list (ul li). Het lukt me nog wel om een dropdown menu te maken, maar dat ziet er erg 1995 uit, ik wil het in de html5 look.
Het menu wat ik bedoel lijkt in het kaartje van Nederland te staan, onderaan, op http://www.knmi.nl/nederland-nu/weer/verwachtingen. In de bijlage heb ik een screenshot van het dropdownmenu dat ik bedoel Daar waar "donderdag overdag" staat is het menuutje wat ik bedoel.
Ik heb in de html en css van het knmi zitten neuzen, maar daar kom ik er niet uit. Wie weet hoe ik zoiets redelijk eenvoudig kan maken in html5 en css3?

Weet jij het antwoord?

/2500

Het beste antwoord

Wat ze bij het KNMI hebben gedaan, is het volgende trucje: Ze hebben gewoon een '1995'-select list gemaakt. Tevens maken ze een DIV (bij hen is de class="select__wrp"). Deze DIV bevat de teskt Vrijdag overdag Verder hebben ze daar overheen de normale selectlist staan, maar dan met opacity: 0;. Onzichtbaar dus. Maar hij is er wel, en hij werkt ook. Als je dan een andere keuze maakt, wordt er dmv jquery de tekst in de DIV vervangen door de gekozen waarde.

Stel zelf een vraag

Ben je op zoek naar het antwoord op die ene vraag die je misschien al tijden achtervolgt?

/100