﻿/* Dropdown-Menü */
/* Version 0.0.0.1 */
/* 2018-12-01 */
/* by T. C. Woodeggs, Glockenbreite 3, D-34414 Warburg, Germany */

/* Ausgangscode: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Dropdown-Men%C3%BCs_mit_CSS_gestalten#Horizontale_Formatierung */
/* Datum: 01.12.2018, 12:14 */
/* Lizenz: Die Inhalte des SELFHTML-Wikis unterliegen der CC-BY-SA 3.0 (de). */



nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

nav li {
/* Außenrand oder -abstand zu anderen Elementen */
	margin: 0.0vw;
/* Innenabstand zw. Inhalt und dessen Element */
	padding: 0.5vw;
	font-size: 1.2vw;
	flex: 1 1 0%;
}

@media (min-width: 10vw) {
	nav > ul {
		flex-direction: row;
	}
	nav li {
		flex: 1;
		font-size: 1.2vw;
	}
}

nav a {
	display: block;
	padding: 0.2vw;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	border: 1px solid #09521c;
    border-radius: 0.7vw;

/* vor dem Komma: 1.Wert: Rechtsverschiebung einer Farbe unter dem Schalter, 2.Wert: Verschiebung einer Farbe unter dem Schalter von oben nach unten, 3.Wert: Zerstreuung der Farbe unter dem Schalter */
/* hinter dem Komma: 1.Wert: Überlappung des Schalters mit Farbe von links nach rechts, 2.Wert: Überlappung mit Farbe von oben unten, 3.Wert: Zerstreuung der überlappenden Farbe */
	box-shadow: 0.3vw 0.3vw 0.7vw white inset;
	color: #ffffff;
	background-color: #09521c;

/* zeitliche Steuerung / Farbübergang */
    transition: all .25s ease-in;
}

nav li[aria-current] a {
	background-color: firebrick;
	color: #0186ba;
}

nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
    color: #ffffff;
    text-shadow: 0vw 0vw 0.3vw #fff;	
	background-color: #0186ba;
}
/*     submenu navigation links      */

nav .submenu {
	visibility: hidden;
	height: 0;
	z-index: 1000;
}

nav .submenu li {
	display: block;
	/* width: 15em; */
}
/**     Show the submenu on hover, focus     **/

nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu {
	visibility: visible;
	height: auto;
}

nav li:focus-within .submenu {
	visibility: visible;
	height: auto;
}
