Hi,

ich habe folgende Struktur

HTML-Code:

<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

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

#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

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.

Code :

1 2 3

#containerheader ul ul{   top: 2em; }

hinzugefügt sollte grob funktionieren.