/* Main Navigation */
nav {
    
    background: #444;
    width: 100%;
    height: 50px;          /* or 55px depending on your taste */
    line-height: 50px;     /* vertically centers the text
    overflow: visible;
    border: 2px solid red;


}

nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    white-space: nowrap;     /* prevents horizontal spreading */
    display: inline-block;   /* keeps the menu tight inside the bar */
    overflow: visible;
}



 
nav ul li {
    display: inline-block;
    position: relative;
    padding: 0 16px;
    vertical-align: top;     /* keeps items inside the bar */
    overflow: visible;
}


/* Hover background for top-level items */
nav ul li:hover {
    background: #03ADDF;
}

/* TOP-LEVEL LINKS — THIS IS WHERE FONT SIZE + WHITE COLOR GO */
nav ul li a {
    color: #fff;           /* white text */
    text-decoration: none;
    padding: 0 12px;       /* horizontal padding only */
    font-size: 14px;       /* your readable size */
    line-height: 50px;     /* aligns text vertically */
    padding-top: 0;        /* no extra space above */
}

/* Hover text color */
nav ul li a:hover {
    color: #fff;
    text-decoration: none;
}

/* Make top-level menu horizontal */
ul > li.parent {
    display: inline-block;
    position: relative;
    margin-right: 20px;

}
/* Position child dropdowns */
nav ul li ul.child {
    width: auto;          /*  width: auto;   prevents full‑screen stretching */
    max-width: 250px;     /* max-width: 250px;  keeps dropdown compact */
    white-space: normal;  /*white-space: normal; ensures vertical stacking */
    display: none;         /*display: none;   */
    position: absolute;
     top: 100%;        /* this is correct */
    left: 0;
    background: #008B8B;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: visible;       /* fix   */
}

/* Show dropdown on hover */
nav ul li:hover > ul.child {
    display: block;
}

/* Child items vertical */
nav ul li ul.child li {
    display: block;
    width: 100%;
    padding: 0;
}



/* Sub Menu */
nav ul li.parent ul.child {
    display: none;
}

nav ul li.parent:hover ul.child {
    display: block;
    position: absolute;
    top: 100%;          /*  was 40px  */
    background: #008B8B;
}

nav ul li.parent ul.child li {
    width: 9em;
    padding: 0;
}

nav ul li.parent ul.child li:hover {
    background: #008B8B;
}
/* Parent items stay inside the 50px bar */
nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 0 12px;
    font-size: 14px;
    line-height: 50px;   /* keeps text centered inside the bar */
}

/* Child dropdown appears directly below the bar */
nav ul li.parent:hover ul.child {
    display: block;
    position: absolute;
    top: 50px;           /* EXACTLY the height of the nav bar */
    background: #008B8B;
}

 


/* Sub Menu */
nav ul li.parent ul.child {
    display: none;
}

nav ul li.parent:hover ul.child {
    display: block;
    position: absolute;
    top: 50px;
    background: #008B8B;
}

nav ul li.parent ul.child li {
    width: 9em;
    padding: 0;
}

nav ul li.parent ul.child li:hover {
    background: #008B8B;
}

nav ul li.parent ul.child li a {
    display: block;
    color: #fff;           /* submenu text also white */
    padding: 10px 12px;
    font-size: 14px;
    line-height: 20px;
}