#head nav > ul {
	display:flex;
}
#head nav > ul > li {
	flex:1 1 auto;
}
#head nav > ul > li > a {
	text-align:center;
}

#head nav li {
	position:relative;
}
#head nav a {
	padding:1em;
	display:block;
}
#head li > ul {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;

	min-width: 100%;
	todo-width:-webkit-max-content; /* waiting for edge */
	todo-width:max-content;
	todo-max-width:20em;
	white-space:nowrap;

	xdisplay: none;
	/* animate */
	transition-property: opacity, visibility;
	transition-duration: .4s, 0s;
	transition-delay: 0s, .4s;
	visibility:hidden;
	opacity:0;
}
#head li:hover > ul {
	xdisplay:block;
    transition-delay: 0s, 0s;
	visibility:visible;
    opacity:1;
}


/* customize */
#head li > ul {
	background-color:rgba(255,255,255,.9);
	color:var(--thm1-black);
	-webkit-backdrop-filter:blur(3px);
	backdrop-filter:blur(3px);
}
#head li > ul a:hover,
#head li > ul a.cmsActive {
	background-color:var(--thm1-color);
	color:#fff;
}