nav {
    background-color: #008000; /* Dyp grønn farge for navigasjonen */
    padding: 10px 20px; /* Polstring rundt navigasjonen */
}

nav ul {
    display: flex; /* Bruker Flexbox for navigasjonsmeny */
    list-style-type: none; /* Fjerner bullet points fra listen */
    justify-content: space-around; /* Fordeler plass mellom elementene */
    margin: 0; /* Ingen margin på ul */
    padding: 0; /* Ingen padding på ul */
}

nav > ul > li {
    position: relative; /* Nødvendig for absolutt posisjonering av undermenyer */
}

nav a {
    color: white; /* Tekstfarge for navigasjonslinker */
    text-decoration: none; /* Fjerner understrek */
    padding: 10px 15px; /* Polstring inne i navigasjonslinker */
    border-radius: 5px; /* Runde hjørner på lenkene */
    transition: background-color 0.3s; /* Smooth overgang for bakgrunnsfarge */
}

nav a:hover {
    background-color: #005700; /* Mørkere grønn ved hover */
}

/* Vis undermeny ved hover */
nav > ul > li:hover > .sub-menu {
    display: block; /* Vise undermeny ved hover */
}

.sub-menu {
    display: none; /* Skjuler undermenyer som standard */
    position: absolute; /* Plasserer undermenyer absolutt i forhold til foreldreelementet */
    left: 0;
    top: 100%; /* Plasserer undermenyene rett under */
    background-color: #f2f2f2; /* Lysere bakgrunn for undermenyen */
    border: 1px solid #ddd; /* Kantlinje rundt undermenyen */
    border-radius: 5px; /* Runde hjørner på undermenyen */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); /* Mild skygge for undermeny */
    z-index: 1000; /* Sørger for at undermenyen ligger over andre elementer */
}

.sub-menu li {
    margin: 0; /* Ingen ekstra margin på undermenyer */
}

.sub-menu a {
    color: #333; /* Mørkere tekstfarge for undermenyer */
    padding: 10px 15px; /* Polstring for undermenyer */
    display: block; /* Får undermenylenker til å fylle hele raden */
    transition: background-color 0.3s; /* Smooth overgang for bakgrunnsfarge */
}

.sub-menu a:hover {
    background-color: #ddd; /* Lysere bakgrunn ved hover over undermenylenker */
}

/* Responsiv design for skjermer mindre enn 768px */
@media (max-width: 768px) {
    nav ul {
        display: none; /* Skjuler vanlig meny på mindre skjermer */
        flex-direction: column; /* Stiller undermenyene vertikalt */
    }

    .hamburger {
        display: block; /* Viser hamburger-meny for mobil visning */
        cursor: pointer; /* Endrer musepekeren til hånddyktig */
        font-size: 24px; /* Størrelse på hamburger-ikonet */
    }

    .menu-open nav ul {
        display: flex; /* Viser meny ved klikk på hamburger */
    }
}