/* >> THE MENU */

#menu { 
margin: 0 0 0px; /* just to give some spacing */ 
width:100%;
} 
#menu ul { 
margin: 0; 
padding: 0; /* only needed if you have not done a CSS reset */ 
display:flex;
justify-content:stretch;
} 
#menu li { 
display:grid; 
margin: 0; 
padding: 0; /* only needed if you don't have a reset */ 
position: relative; /* this is needed in order to position sub menus */ 
flex-grow:1;
} 
#menu li a { 
display: block; 
transition:all 0.5s;
text-decoration:none;
font-weight:bold;
text-align:center;
background-repeat:no-repeat;
background-position:center center;
background-size:0% 100%;
    font-size:110%;
    padding:0.75vmin;
    text-transform:uppercase;
    font-weight:bold;
}

#menu li a:hover {
background-size:100% 100%;
}

/* >> SUB MENU */

#menu ul ul { /* this targets all sub menus */ 
display: none; /* hide all sub menus from view */ 
position:relative;
z-index:600;
} 
#menu ul ul li { /* this targets all submenu items */ 
float: none; /* overwriting our float up above */ 
font-size:100%;    
white-space: nowrap;
} 

#menu ul li:hover > ul { 
display:none;
}

#menu li a:hover {
text-shadow: 0 0 6px #000, 0 0 6px #000, 0 0 6px #000 !important;
color:white !important;
}


#menu ul ul li a {
 font-size:90%;
}