:root {
  
}

nav {
	height: 80%;
}

nav ul {
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: row;
	height: 100%;
	width: 100%;
	border-bottom: solid 2px silver;
	margin: 0 0 1em 0;
	color: var(--menucolor);
	align-items: flex-end;
}

nav>ul>li {
	position: relative;
	height: 1.5em;
	margin: 0;
	padding: 0 0.5em 0 0.5em;
}

/* submenu navigation links */
nav li .submenu {
	display: block;
	position: absolute;
	visibility: hidden;
	left: 0;
	top: 1.5em;
	border: 0.5em;
	width: 10em;
	z-index: 10;
}

nav .submenu li {
	min-width: 5em;
	padding: 0.2em 0.4em 0.2em 0.4em;
	background-color: var(--menubgcolor);
}

nav li:hover  {
	background-color: var(--menuheadcolor);
}

nav li:hover .submenu {
	visibility: visible;
} 

nav a {
	text-decoration: none;
	color: var(--menucolor);
}