nav>ul {
width: 100%;
max-width: 1200px;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
nav li {
width: 100%;
max-width: 1200px;
border: 1px solid #79B3E5;
border-left: none;
border-right: none;
font-family: Arial;
padding: 0;
font-size: 1.5rem;
flex: 1 1 0%;
}
@media (min-width: 45em) {
nav>ul {
flex-direction: row;
}
nav li {
flex: 1;
font-size: 1em;
}
}
nav a {
display: block;
padding: 0.4em;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #79B3E5;
}
nav li[aria-current] a {
background-color: #79B3E5;
color: white;
font-family: Arial;
}
nav a:focus,
nav a:hover,
nav li[aria-current] a:focus
nav li[aria-current] a:hover {
background-color: #79B3E5;
color: white;
}
nav li[aria-current] a:focus,
nav .submenu li a{
color: #79B3E5;
background-color: white;
}
nav li a:hover,
nav li:hover .submenu {
color: white;
background-color: #79B3E5;
}
nav .submenu li[aria-current] a {
color: white;
background-color: #79B3E5;
}
/* submenu navigation links */
nav > ul > li {
position: relative;
}
nav .submenu {
position: absolute;
visibility: hidden;
width: 100%;
height: 0;
z-index: 1000;
}
nav .submenu li {
display: block;
border-top: none;
/* width: 15em; */
}
/** Show the submenu on hover, focus **/
nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu {
visibility: visible;
height: auto;
background-color: white;
border-right: 1px solid #79B3E5;
border-left: 1px solid #79B3E5;
border-top: 1px solid #79B3E5;
}
