/* 1. Make the main navbar the structural base */
.navbar {
    position: relative;
    z-index: 1000; /* Ensures the entire nav layer sits above the page content */
}

/* 2. Hide submenus by default and position them absolutely */
.nav-menu ul {
    display: none;
    position: absolute;
    top: 100%; /* Positions it directly below the parent LI link */
    left: 0; /* Aligns it cleanly to the left edge of the parent LI */
    z-index: 9999; /* Forces the submenus to float above all other elements */
    min-width: 200px; /* Prevents text from wrapping too aggressively */
    /* Optional: Basic styling so it doesn't look transparent */
    background-color: #ffffff;
    list-style: none;
    padding: 10px;
    margin: 0;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}

/* 3. CRITICAL: Turn parent list items into layout anchors */
.nav-menu > li {
    position: relative; /* This confines 'position: absolute' submenus to stay right here */
    display: inline-block; /* Keeps main items side-by-side (or use flexbox on .nav-menu) */
}

    /* 4. Show the submenus on hover */
    .nav-menu > li:hover > ul {
        display: block;
    }

/* 5. Clean up submenu link display */
.nav-menu ul li a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
}