Pulldown menu

[wachteldonk]

Hi,

ich habe folgende Struktur

<div id="containerheader">
  <ul class="menu">
    <li class="item-465 current active"><a href="/projekte/server2_myapp_dresden_de/httpdocs/cms/" >HOME &amp; NEWS</a></li>
    <li class="item-466"><a href="/projekte/server2_myapp_dresden_de/httpdocs/cms/index.php/myapp" >myapp DRESDEN</a></li>
    <li class="item-467"><a href="/projekte/server2_myapp_dresden_de/httpdocs/cms/index.php/shops" >SHOPS</a></li>
    <li class="item-468 deeper parent"><a href="/projekte/server2_myapp_dresden_de/httpdocs/cms/index.php/leistungen" >LEISTUNGEN</a>
      <ul>
        <li class="item-479"><a href="/projekte/server2_myapp_dresden_de/httpdocs/cms/index.php/leistungen/navigation" >Navigation</a></li>
        <li class="item-470"><a href="/projekte/server2_myapp_dresden_de/httpdocs/cms/index.php/leistungen/dsl" >DSL</a></li>
      </ul>
    </li>
    <li class="item-469"><a href="/projekte/server2_myapp_dresden_de/httpdocs/cms/index.php/service" >SERVICE</a></li>
    <li class="item-439"><a href="/projekte/server2_myapp_dresden_de/httpdocs/cms/index.php/kontakte" >KONTAKTE</a></li>
  </ul>
</div>

ich nutze folgende CSS definition

#containerheader ul.menu {
	list-style: none;
	width: 1000px;
	font-size: 1.2em;
	margin: 0 auto;
	padding-top:30px;
	padding-bottom:10px;
	z-index: 1000;
	}
	
#containerheader ul.menu li {
	float: left;
	display: inline;
	margin: 0;
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
	z-index: 1000;
	}
	
#containerheader ul.menu li a{
	padding: 10px 5px;
	color: #000000;
	display: block;
	text-decoration: none;
	float: left;
	text-transform: uppercase;
	z-index: 1000;
	}
	
	
/* Sub */

#containerheader ul.menu li ul {
	color:999999;
	list-style: none; 
	margin: 0; 
	padding: 0; 
	left: 0px;
	background-color:#cccccc;
	z-index: 1000;
	}
	
#containerheader ul.menu li ul li {
	color:999999;
	background-color:#cccccc;
	position: relative;
	z-index: 1000;
	}
	
#containerheader ul ul {
	position: absolute; 
	top: 0; 
	left: 100%; 
	width: 100%; 
	z-index: 1000;
	}
	
div#containerheader ul ul, div#containerheader ul ul li:hover ul {
	display: none;
	z-index: 1000;
	} 

div#containerheader ul li:hover ul, div#containerheader ul ul li:hover ul {
	display: block;
	z-index: 1000;
	}

Leider wird die zweiet Ebene immer über den Hauptpunkt gelegt. Es soll aber relativ dazu , unterhalb des Hauptmenüpunkts aufgeklappt werden. Ne Idee was ich da falsch mache?

Danke für die Hilfe

 

[para_noid]

Hi,

du hast das zweite Menü absolut positioniert, aber keinen Abstand nach oben festgelegt. Deswegen orientiert es sich an der linken oberen Ecke des Elternelements und überdeckt es somit.

#containerheader ul ul{
  top: 2em;
}

hinzugefügt sollte grob funktionieren.