Usability experts adviseren dat de hoofdnavigatie van je website niet meer dan 9 items bevat. Dat is voor veel websites ook meer dan genoeg, maar als je een uitgebreide website hebt kun je natuurlijk behoefte hebben aan een uitgebreider menu. In zo’n geval is een dropdown menu een logische keuze.
In deze tutorial lees je hoe je een dropdown menu maakt waarbij de submenu items automatisch uitvouwen wanneer je met de muis over het parent item in de hoofdnavigatie gaat (hover). Daarbij maken we uitsluitend gebruik van CSS.
In dit artikel lees je:
- Dat een eenvoudig HTML menu bestaat uit een lijst met ul en li elementen
- Dat je voor het dropdown effect het submenu moet verbergen met “display:none”
- Hoe je het submenu weer kan weergeven bij een mouse over
Een eenvoudig HTML menu
In dit artikel heb je kunnen lezen hoe je een navigatiemenu maakt met HTML en CSS. De uitgebreide code en uitleg daarvoor vind je ook in dat artikel. Zorg dat je deze basis onder de knie hebt, want ik gebruik het menu uit dat artikel tevens voor dit artikel. Als je WordPress gebruikt is je menu waarschijnlijk op dezelfde manier opgebouwd.
<div id="nav">
<ul>
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a>
<ul>
<li><a href="#">submenu item 2.1</a></li>
<li><a href="#">submenu item 2.2</a></li>
</ul>
</li>
<li><a href="#">menu item 3</a></li>
</ul>
</div>
De submenu items verbergen
Met bovenstaande code creëren we een gewoon navigatiemenu, waarbij de submenu items standaard zichtbaar zijn. Om er een dropdown menu van te maken moeten we eerst de submenu items standaard verbergen. Daarvoor gebruiken we de volgende code in de stylesheet:
Als het goed is weet je dat een navigatiemenu bestaat uit een lijst, aangegeven met het element <ul>. Deze lijst bestaat uit diverse menu items, ieder aangegeven met een <li> element. Een submenu is eigenlijk gewoon een eigen navigatiemenu, maar dan binnen een <li> element.
De bovenstaande code bestaat uit de volgende onderdelen:
- #nav is de id van ons navigatiemenu, zodat de code alleen van toepassing is op dit menu
- li ul geeft aan dat de code bedoeld is voor een <ul> element dat binnen een <li> element valt (een submenu dus)
- {display: none;} vertelt de browser dat hij dit <ul> element niet mag weergeven
De submenu items weergeven bij een hover (mouse over)
Met bovenstaande code hebben we het submenu standaard verborgen, maar dit moet natuurlijk wel tevoorschijn komen als we met de muis over het betreffende <li> element gaan. Daarvoor zetten we de volgende code onder bovenstaande code in de stylesheet:
De bovenstaande code bestaat uit de volgende onderdelen:
- #nav, de id van ons menu
- li:hover geeft aan dat de code bedoeld is voor het <li> element waar de muis overheen gaat
- ul geeft aan dat de code bedoeld is voor het <ul> element dat onder dat betreffende <li> element valt
- {display: block;} zorgt ervoor dat dit element nu wel weergegeven wordt.
Responsive hamburger dropdown menu
Wil je een responsive “hamburger” dropdown menu maken? Lees dan deze tutorial. Dat is echter wel een stuk lastiger dan bovenstaande methode, dus daar heb je wel wat meer kennis voor nodig.

Hulp nodig met je website?
Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een website voor je te bouwen, jouw website te verbeteren of een training over dit onderwerp te verzorgen.
Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?
Een kleine eenmalige donatie wordt altijd zeer op prijs gesteld 🙂
Hoi,
Leuke tips voor een dropdownmenu met css3, maar met inline-block wordt het bij mij geen dropdown menu, maar komen de items in de zelfde lijn er naar te staan waarbij de volgende items opschuiven. Een nogal onrustig en springerig effect. Maar wellicht moet het net iets anders zijn? Graag hoor ik van je.
Jop
Hi Jop,
Bedankt voor je reactie. Een drop-ernaast menu dus 😉
Maar je hebt gelijk, het moet niet inline-block zijn maar block. Bij deze aangepast!
Groeten van Bob
Hey, Ik heb het probleem dat de knoppen te dicht op elkaar staan. Hoe kan je de marge van de knoppen aanpassen zodat ze verder uit elkaar staan? Heel erg bedankt verder!
Groetjes
Hi Joy,
Bedankt voor je reactie. Je kunt de ruimte tussen menu items vergroten met de margin eigenschap.
Op basis van bovenstaande code doe je dat als volgt:
Met deze code voeg je een marge van 20 pixels toe aan de rechterkant van ieder menu item. Als je het heel netjes wilt doen voeg je ook nog de volgende code toe:
Dan krijgt het laatste menu item geen marge. En als je alleen marge wilt toevoegen aan de submenu items gebruik je
Lukt het hiermee?
Groeten van Bob