Navigation: DropDown funktioniert irgendwie nicht ...

[Alexander fragt]

Ich bastle an einem neuen Layout und die Testseite ist noch nicht fertig, aber es hängt gerade nach vielen Tagen und immer neuen Versuchen am Navigationsmenü. Dieses war zuvor links und ist jetzt horizontal und "ausklappbar" angedacht.

Die Version mit "visibility" funktioniert besser, aber keinesfalls einsatzbereit. Und mit "font" und "z-index" hatte ich noch weniger Erfolg.

Über die TESTSEITE könnt Ihr den aktuellen Stand sehen:

1. Dropdown-Menüs verschwinden hinter "contentfield".
2. Maus-Navigation irgendwie fehlerhaft (Dropdown-Punkte nicht auswählbar).

Kurz zur Struktur die wichtigsten HTML- und CSS-Einstellungen:

index.2014.php

  
<div id="header">  
</div>  
  
<div id="navigation">  
</div>  
  
<div id="contentfield">  
  <div id="content">  
  </div>  
  
  <div id="right">  
  </div>  
</div>  
  
<div id="footer">  
</div>  

styles.2014.css

  
#contentfield {  
	position: relative;  
	width: 100%;  
	clear: both;  
}  
  
#right {  
  position: absolute;  
  top: 0px;  
  right: 0px;  
  width: 152px;  
  height: 450px;  
  margin: 25px 0 0 0;  
  padding: 0;  
}  
  
nav,  
nav ul,  
nav ul li,  
nav ul ul {  
    list-style: none;  
    margin: 0;  
    padding: 0;  
    border: 0;  
}  
nav ul {  
   	padding: 0px 0px;  
	margin: 0px;  
	text-align: center;  
}  
nav ul li {  
	display: inline-block;  
	float: left;  
	position: relative;  
	list-style: none;  
	letter-spacing:0.05em;  
	text-transform: uppercase;  
	text-decoration: none;  
	text-align: center;  
	padding: 0px;  
}  
nav ul li a {  
	display: block;  
    color: rgb(0,0,0);  
	text-decoration: none;  
	width: 163px;  
	font-weight:none;  
	padding: 20px 0px;  
}  
nav ul li a:hover {  
	float: left;  
	background-color: #B9A254;  
	color: #FFFFFF;  
	text-decoration:none;  
}  
nav ul li:hover ul {  
	visibility: visible;  
	//font: inherit;  
	//z-index: auto;  
}  
nav ul li ul {  
	display: inline;  
	position: absolute;  
	padding: 0px;  
	top: 4em;  
	left: -0.1em;  
  
	visibility: hidden;  
	//font: 0/0 serif;  
	//z-index: -1;  
}  
nav ul li ul li {  
	float: none;  
	display: block;  
}  
nav ul li ul li a {  
	width: 163px;  
	padding: 5px 0px;  
}  

Es würde mich riesig freuen, wenn Ihr mir weiterhelfen könnt. Ich bin für jegliche Tipps dankbar und hoffe immer noch, dass es irgendwo einen Denkfehler gibt.

Ganz herzlichen Dank
Alexander

P.S. Die beiden Links der letzten Frage zur Navigation hatte ich übrigens in Vorbereitung auf die Programmierung schon gelesen und daraus auch den Code.