:root {
 --navbkg: #FAFAFA;
 --itemcolor-active: #c33;
 --itemcolor-inactive: #900;
 --itembkg-active: #ffe;
 --menubkg: #fffffe;
 --menusep: #dfdfdf;
}

.kap {font-size: 150%;}

nav.ddmenu {
 width: 80%;
 margin-left: auto; margin-right: auto;
 text-align: center;
 background-color: var(--menubkg);
 font-family: Arial, sans-serif;
 letter-spacing: 0.3em;
}

nav.ddmenu a:link, nav.ddmenu a:visited {color: var(--itemcolor-inactive);}

nav.ddmenu menu {
 padding: 0;
 margin: 0;
 text-align: left;
 box-shadow: 3px 3px 3px var(--menusep);
}

nav.ddmenu menu li {
 list-style: none;
 float: left;
 border-right: 1px solid var(--menusep);
}


nav.ddmenu > menu {display: inline-block;}
nav.ddmenu > menu li {background-color: var(--menubkg);}
nav.ddmenu > menu li:first-child {border-left: 1px solid var(--menusep);}


nav.ddmenu menu li a {
 text-decoration: none;
 display: block;
 color: var(--itemcolor-inactive);
 padding: 0.5em 1em 0.5em 1em;
 transition: background 0.3s ease-out;
}

nav.ddmenu menu li:hover > a, nav.ddmenu menu li:active > a {
 color: var(--itemcolor-active);
 background-color: var(--itembkg-active);
}
nav.ddmenu menu li:hover > menu, nav.ddmenu menu li:active > menu {visibility: visible;}

nav.ddmenu menu li menu{
 display: inline;
 visibility: hidden;
 position: absolute;
 padding: 0;
 box-shadow: 3px 3px 3px var(--menusep);
}


nav.ddmenu menu li menu li{float: none;}

nav.ddmenu menu li menu li a {color: var(--itemcolor-inactive);}
nav.ddmenu menu li menu li a:hover, nav.ddmenu menu li menu li a:active {
 color: var(--itemcolor-active);
 background-color: var(--itembkg-active) !important;
}