/* Farbe r-giedt.de
Dunkel: RGB 57,53,52; #393534;
*/
nav {
/*background-color: silver;
border: 1px solid black;*/
height: 2em;
padding: 0.8em;
max-width: 50em;
}
height: 2em;
padding: 0.8em;
max-width: 50em;
}
nav:after {
clear: left;
content: "";
}
nav ul {
margin: 0;
padding: 0;
text-align: center;
}
nav li {
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
/* Unternavigation ausblenden */
nav ul ul {
font: 0/0 serif;
margin: 0;
padding: 0;
position: absolute;
top: 2.5em;
z-index: -1;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
/* Unternavigation einblenden */
nav ul li:hover ul {
font: inherit;
z-index: auto;
}
nav ul ul li {
float: none;
margin-bottom: 0.2em;
}
nav a,
nav span {
/*background-color: royalblue;
background-image: repeating-linear-gradient(135deg, transparent, transparent 9px, gold 9px, gold 10px);
*/
background-color: #D5EAED;
border-radius: 6px;
border: 1px solid #cecece;
box-shadow: 0px 5px 10px white inset;
font-family: verdana, Arial, Sans-serif;
font-size: 15px;
color: #393534;
margin: 0.3em;
padding: 0.5em 1em ;
text-decoration: none;
/* Breite den in li enthaltenen Elementen zuweisen */
width: 6.4em;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
nav ul ul a,
nav ul ul span {
border-radius: 6px;
}
/* aktuelle Unterseite kennzeichnen */
nav a:focus,
nav a:hover,
nav span {
color: #fff;
background-color: #393534;
border: 1px solid #D5EAED;
}
/*
nav a:focus,
nav a:hover {
margin-top: 0;
padding: 1em 0.4em 0.4em;
}
nav ul ul a:hover {
margin: 0.6em 0 0 0;
padding: 0.4em;
}
*/
/* aktuelle Menüpunkt kennzeichnen */
nav ul span {
background-color: #393534;
color: #fff;
}
/* aktuelle Unter-Menüpunkt kennzeichnen */
nav ul ul span {
background-color: maroon;
color: gold;
}
/*
// Die PHP-Dateitei
Beispiel 8: Dynamisch Navigationsleisten einblenden
Kombinieren mehrerer Transformationen
*/