/* General styles for the navigation */
.nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav li {
    position: relative;
}

/* Ensure submenu is hidden by default */
.sub-menu {
    display: none; /* Hide by default */
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 1000;
    max-height: 300px; /* Limit height to allow scrolling */
    overflow-y: auto !important; /* Force vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    width: 250px; /* Adjust width if needed */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
}

/* Ensure the submenu appears within the viewport */
.has-sub {
    position: relative;
}

/* Show submenu when 'has-sub' is hovered */
.has-sub:hover .sub-menu {
    display: block;
}

/* Optional: Style for submenu items */
.sub-menu li {
    padding: 10px;
    border-bottom: 1px solid #eee; /* Add a subtle separator */
}

.sub-menu li:last-child {
    border-bottom: none; /* Remove border from last item */
}

.sub-menu a {
    text-decoration: none;
    color: #333;
    display: block;
}

/* Improve scrollbar appearance */
.sub-menu::-webkit-scrollbar {
    width: 8px;
}

.sub-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.sub-menu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.sub-menu::-webkit-scrollbar-thumb:hover {
    background: #555;
}