html {
   background-image: url(haffkrug.png);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
}

body {
    font-family: 'Courier New', monospace;
    font-size: 16px;
}

#nav, #nav ul, #nav li {
   display:block; 
   margin:0; 
   padding:0; 
   list-style:none; 
}

#nav, #nav * { 
   font-size:14px;
   line-height:20px;
   color:#000;
   background:#fff;
   text-align:left;
   font-family: 'Courier New', monospace;
}

#nav a{
   display:block; 
   background:#fff;
   padding: 0 5px 0 10px;
}

#nav a[href] { 
   text-decoration:none;
   color:#f00;
}

#nav *:focus { 
   outline-width:0; 
}

#nav {
   text-align:center;
   box-shadow:0px 6px 10px -5px #666, inset 0px -8px 8px -7px #000, inset 0px 4px 8px -7px #666;  /* Schatteneffekte */
}
#nav > li > a {
   padding: 5px 10px;
   box-shadow:inset 0px -8px 8px -7px #444, inset 0px 4px 8px -7px #666;
}

#nav ul {
   position:absolute;
   min-width:20em;
   border:1px solid #ccc;
   text-align:left;
   box-shadow:3px 5px 10px #666;
} 
 
/* Jedes Item in jedem Level erzeugt einen neuen Koordinatenkontext */
#nav li {
   position:relative;
} 
 
/* Der 1. Level erscheint vertikal unter den Menu-Labels */
#nav .level1 {
   top:30px;
   left: -1999px;    /* einblenden left:-1px;*/
}
 
/* Der 2. bis x. Level erscheint horizontal versetzt neben dem ersten Level */
#nav .level2, #nav .level3, #nav .level4 {
   top:2px;
   left:-1999px;     /*einblenden left:8em;*/
}

#nav a.current{ 
   background: #aaf; 
}

#nav a:hover, #nav li.hover >  a { 
   background: #ddd; 
   outline:1px solid #f90;
   outline-width:2px;
   outline-offset:2px;
   position:relative;
   z-index:20;
}
#nav a.current:hover, #nav li.hover >  a.current{
   background: #aaf; 
}

#nav ul a:not([href]):not([class="current page"]):before { 
   float:right;  
   content: "\25b8";  /* Pfeil rechts */
   padding-left:5px; 
}
#nav > li > a:not([href]):not([class="current page"]):before { 
   float:right; 
   content: "\25be";  /* Pfeil runter */
   padding-left:5px; 
}

.level1 { z-index:11; }
.level2 { z-index:12; }
.level3 { z-index:13; }
.level4 { z-index:14; }

#nav > li:hover .level1, #nav > li.hover .level1           { 
   left:-1px; 
   /* den obersten Level verzögert einblenden */
   transition-property: left;  
   transition-delay: 0.3s; 
}
#nav li:hover > .level2, #nav .level1 >li.hover .level2  { left:20em; }
#nav li:hover > .level3, #nav .level2 >li.hover .level3  { left:20em; }
#nav li:hover > .level4, #nav .level3 >li.hover .level4  { left:20em; }