#navigation {
    width: 100%;  /* Breedte van de navigatie */
    font-size: 1rem;  /* Moderne eenheid voor font-size */
    margin-top: 7%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  /* Moderner font */
}

#navigation ul {
    padding: 0;
    margin: 0;
    list-style: none;  /* Verwijder de standaard lijststijl */
}

ul.top-level {
    background: #444;  /* Donkere achtergrond voor de top-level menu */
    border-radius: 8px;  /* Afgeronde hoeken */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Subtiele schaduw */
}

#navigation li {
    position: relative;  /* Voor positionering van submenu's */
}

ul.top-level li {
    border-bottom: 1px solid #555;  /* Subtiele scheidingslijn */
}

#navigation a {
    line-height: 2.5;  /* Betere regelafstand */
    padding: 10px 15px;  /* Meer padding voor betere klikbaarheid */
    display: block;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s ease;  /* Soepele overgang voor hover-effect */
}

#navigation a:hover {
    background: #ff6f61;  /* Frisse oranje/roze kleur voor hover */
    border-radius: 4px;  /* Afgeronde hoeken bij hover */
}

#navigation li:hover {
    background: #ff6f61;  /* Frisse oranje/roze kleur voor hover */
}

ul.sub-level {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #555;  /* Donkere achtergrond voor submenu's */
    border-radius: 8px;  /* Afgeronde hoeken */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Subtiele schaduw */
    z-index: 1000;  /* Zorgt ervoor dat het submenu boven andere content komt */
}

li:hover > .sub-level {
    display: block;  /* Toon submenu bij hover */
}

ul.sub-level li {
    width: 200px;  /* Breedte van submenu-items */
    border-bottom: 1px solid #666;  /* Subtiele scheidingslijn */
}

#navigation .sub-level {
    background: #555;  /* Donkere achtergrond voor submenu's */
}

#navigation .sub-level .sub-level {
    background: #666;  /* Iets lichtere achtergrond voor subsubmenu's */
    top: 0;  /* Uitlijnen met de bovenkant van het submenu */
    left: 100%;  /* Plaats het subsubmenu rechts van het submenu */
}

.sub-level li:hover > .sub-level {
    display: block;  /* Toon subsubmenu bij hover */
}