<style>
 
   nav { 
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }

    nav ul { /*Navigation Bar Container*/
    text-align: center;
    list-style: none;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 150px;
    padding: 0;
    font-weight: bold;
    width: 100%;
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }
    
    nav ul li { /*Navigation Bar Element*/
    text-align: center;
    background-color: white;
    padding: 0px;
    width: 20%;
    height: 25px;
    position: relative;
    float: left;
    margin: 0;
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }
    
    nav ul a { /*Navigation Bar Element Text*/
    text-align: center;
    vertical-align: middle;
    color: rgb(19, 33, 139);
    text-decoration: none;
    font-family: 'helvetica', arial black;
    font-size: 1em;
    width: 100%;
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }
    
    nav ul li:hover { /*Navigation Bar Element Effect*/
    background-color: #cc9900;
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }
    
   nav ul ul { /*2nd Level Navigation Bar Container*/
  display: none;
  position: absolute; /* Absolutely position it relative to the nearest positioned ancestor */
  top: 100%; /* Place the top edge of the dropdown at the bottom edge of the parent */
  left: 50%; /* Center the left edge of the dropdown */
  transform: translateX(-50%); /* Shift it back by half its width to truly center */
  width: 100%; /* Adjust width to content if needed AUTO, or keep 100% */
  padding: 0;
  margin: 0;
  font-weight: normal;
  background-color: white;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  text-align: center; /* Center the *content* within the dropdown */
}

nav ul ul li { /*2n Level Navigation Bar Element*/
  float: none; /* Ensure they stack vertically */
  width: auto; /* Adjust width to content */
  height: 25px;
  margin: 0 auto; /* Center the list items horizontally within the dropdown */
  z-index: 9999;
}

nav ul ul a { /*2n Level Navigation Bar Element Text*/
  display: block; /* Make the whole area clickable */
  line-height: 25px;
  padding: 0 10px; /* Add horizontal padding for spacing */
  vertical-align: middle;
  text-align: center; /* Ensure text is centered within the link */
  z-index: 9999;
}


    nav ul li:hover > ul { /*2n Level Navigation Bar Element Effect*/
    display: block;
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }


  </style>