Horizontaal menu

Een mooie manier van een menu maken is om deze horizontaal bovenaan de pagina te plaatsen. We hebben al geleerd om een menu met <ul> en <li> te maken. Maar dit soort lijsten worden standaard verticaal weergegeven.

We kunnen een menu horizontaal maken met behulp van de display: flex property.

We moeten wel opletten dat we alleen de menu items van het hoofdmenu via flex horizontaal plaatsen. Als we ook alle submenu's horizontaal plaatsen wordt het verwarrend. (Probeer maar eens de > weg te halen)

nav > ul { display: flex; } <nav> <ul> <li>Home</li> <li>Tutorials <ul> <li>Photoshop</li> <li>Illustrator</li> <li>Webdesign</li> </ul> </li> <li>Articles</li> <li>Inspiration</li> </ul> </nav>