template/src/main/css/nav.css

.nav {
    margin: 0;
    width: 100%;

    background-color: var(--fwdekker-theme-color);
    font-size: 120%;

    --padding: calc(2em / 3);
}

.nav * {
    z-index: 10;
    vertical-align: middle;
}

.nav a {
    display: inline-block;
    margin: 0;
    padding: calc(var(--padding)) calc(var(--padding));
    width: 100%;

    color: white;
}


.nav .logo {
    width: calc(1em + var(--padding));
    height: calc(1em + var(--padding));

    vertical-align: middle;
    filter: brightness(0) invert(1);
}
.nav div.logo {
    display: inline-block;
    margin-right: calc(1em / 3);
}


.nav ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.nav ul li {
    display: inline-block;
    margin: 0;
    padding: 0;

    position: relative;
    background-color: var(--fwdekker-theme-color);
}

.nav ul li:hover,
.nav ul li:focus-within {
    cursor: pointer;
    background-color: var(--fwdekker-theme-color-very-dark);
}

.nav li.currentPage {
    background-color: var(--fwdekker-theme-color-dark);
}


.nav ul li ul {
    display: none;
    position: absolute;
    left: 0;
}

.nav ul li ul li ul {
    left: 100%;
    top: 0;
}

.nav ul li:hover > ul,
.nav ul li:focus-within > ul,
.nav ul li ul:hover {
    display: block;
}

.nav ul li ul li {
    min-width: 7em;
    width: 100%;
}