✔ Horizontales Drop-Down Menü

[MiMi]

Hi,

und zwar habe ich es mittlerweile hinbekommen ein horizontales Drop-Down Menü zu erstellen. Jetzt habe ich das Problem, dass sobald ich über einen Menüpunkt mit der Maus gehe, das komplette Drop-Down sich öffnet, also nicht nur der Unterpunkt, sondern auch auch die Unterpunkte von einem Unterpunkt.
Um das ganze mal zu verdeutlichen:

Gewollt ist natürlich, dass sobald ich über "Java" gehe, nur "Praktika/Java2D" zu sehen ist, und sobald ich über "Java2D" gehe, das nächste Drop-Down sich öffnet und "Pacci/Puzzle" erscheint. Jedoch ist direkt alles sichtbar sobald ich über "Java" gehe.

Dann einmal mein CSS nur vom Drop-Down teil:

    #headPart {
        padding: 0em 0em 2em 0em;
    }

    #nav { 
      text-align: center;
      font-size: 16px;
      padding: 4em 0em 2em 0em;
      background-image: url(Bilder/Hintergrund.png);
     /* margin: 3em auto 1.5em auto;  /*  top, right, bottom, left*/ 
    }
    
    #nav ul li {
      list-style: none;
      float: left;
      position: relative;
      width: 160px;   /* button size */
      margin: 0 auto; /* button distance */
         
    }
        #nav ul li ul {
          margin: 0;
          padding: 0;
          position: absolute;
         /* top: 1.5em;     */
          display: none;   /* hide subnav*/
          z-index: 5;
          background-image: url(Bilder/HintergrundOT.png);
          padding: 0.5em 0em 0.5em 0em; 
        }
        
        #nav ul li:hover ul {
          display: block;   /* show subnav*/
        }
        
        #nav ul li ul li {   /* submenu */
          padding: 0.5em 0em 0.5em 0em; 
        }
        
          #nav ul li ul li ul{ /*subnav2*/
            position: absolute;
            left: 160px;
            top: 0px;
            display: none;   /* hide subnav2*/
          }
           
          #nav ul li ul li:hover ul {
            display: block;   /* show subnav*/
          }
        
    #nav ul li a{
      text-decoration: none;
      display: block;
      font-weight: bold;  
      color: #990000;  /*link color */      
    }
    
    #nav ul a:hover, li a#current {
      background: url(Bilder/current.png) bottom left no-repeat;
    }
  
    #nav ul li a#current {
      background: url(Bilder/current.png) bottom left no-repeat;
    }

Und der HTML-Teil (könnt etwas wirr aussehen, dieser wird von PHP generiert ^^):

<div id="headPart"><div id="nav">
<ul>
	<li><a id="current">Start</a></li>
	<li><a href="index.php?seite=a.php">Lebenslauf</a></li>
	<li><a>CPP</a>
		<ul>
			<li><a href="index.php?seite=b.php">Strategiespiel</a></li>
		</ul>
	</li>
	<li><a>Java</a>
		<ul>
			<li><a href="index.php?seite=c.php">Praktika</a></li>
			<li><a href="index.php?seite=d.php">Java2D</a>
    		<ul>
    			<li><a href="index.php?seite=e.php">Pacci</a></li>
    			<li><a href="index.php?seite=f.php">Puzzle</a></li>
    		</ul>
      </li>
		</ul>
	</li>
	<li><a>Sonstiges</a>
		<ul>
			<li><a href="index.php?seite=">Maya</a>
    		<ul>
    			<li><a href="index.php?seite=g.php">Doppelkeks</a></li>
    			<li><a href="index.php?seite=h.php">Wohnzimmer</a></li>
    		</ul>
      </li>
			<li><a href="index.php?seite=i.php">Game Design</a></li>
			<li><a href="index.php?seite=j.php">Unity3D</a></li>
		</ul>
	</li>
</ul>
</div></div>

Danke auf jeden Fall schonmal

 

[SpiceLab]

Hier ist ein weiterer Selektor für Nachfahren zu formulieren, der dafür Sorge trägt, dass beim Überfahren des oberen Menüpunktes nicht die nachfolgenden Untermenüebenen des aktuellen Untermenüs gezeigt werden, weil ansonsten zwischen dem best. Selektor #nav ul li:hover ul und allen nachfolgenden <ul>-Tags eine Übereinstimmung existiert.

#nav ul li:hover ul ul {
          display: none;   /* hide subsubnav*/
        }

 

[MiMi]

Hi, super danke.
Dann mal um das ganze zu verstehen (sry bin noch relativ neu im CSS Bereich)
Das erste ul bezieht sich auf das komplette Menü. das li:hover bezieht sich auf die Menüpunkte, in disem Fall Java, das nächste ul bezieht sich auf die Unterpunkte hiervon (Praktika/Java2D) um dann an die Unterpunkte von Java2D zu kommen sprech ich das nächste ul an.

Owei ganz schön verwinkelt ^^

Dann noch ne andere Sache, wenn ich jetzt den letzten Menüpunkt aufrufe, und dort das Drop-Down vom Drop-Down sich öffnet, ist es ja auch an der rechten Seite, nur das wäre dann ja ausserhalb des Seitenbereichs. Wie bekomm ich es hin, das es sich dann links vom Drop-Down anordnet?

 

[SpiceLab]

Der Kandidat hat soeben den verwinkelten Parcours mit Bravour bewältigt

Für die zweite Untermenüebene hast du im CSS ja auch schon den entsprechenden Selektor vorgesehen, um sie beim Überfahren der Menüpunkte innerhalb der ersten Submenüebene anzuzeigen.

 

[MiMi]

Hm, also entweder hast du meine Frage falsch verstanden oder ich deine Antwort, wobei ich eher das zweite denke

Naja um das ganze nochmal zu verdeutlichen, wie du ja schon sagtest, sprech ich die zweite Unterebene mit "#nav ul li ul li ul" an. Diese habe ich standardmäßig einfach mal 160px (halt so breit wie das 1. Untermenü ist, nach rechts verschoeben mit -> left: 160px;
Das funktioniert ja auch nur sobald ich beim letzten Menüpunkt "Sonstiges" auf die Untermenüpunkte gehe, werden diese auch rechts angezeigt, wo aber eigentlich schon der Seitenbereich vorbei ist.
Gibt es eine Möglichkeit ansttatt fest zu sagen, 160px nach rechts verschieben, das es je nach Platz rechts oder links angeordnet werden soll?

 

[SpiceLab]

Da wirst du für diese Untermenüebene eine gesonderte Positionierung vornehmen müssen.

Zum Vergleich siehe das Dropdown-Demo http://www.cssplay.co.uk/menus/dd_valid.html mit dem Menüpunkt "Opacity".

Hier lautet für die zweite Untermenüebene die dazugehörige Regel folgendermaßen:

.menu ul li:hover ul li:hover ul.left {left:-105px;}

Das betroffene <ul> des "Subsubmenüs" erhält die Klasse left (<ul class="left">), um es von den anderen <ul>-Tags im Markup abzugrenzen, und einen negativen Wert für die left-Position, womit es nach links geöffnet wird.

 

[MiMi]

Ohje, das wird nen gefummel, das mir php das auch so generiert ^^
Die Seite hatte ich auch schonmal gefunden, aber da der CSS-source dort meist sehr komplex ist, habe ich die Idee hiervon was zu gebrauchen direkt wieder über Bord geworfen

Dann danke nochmals für deine Hilfe. Ich meld mich wenn ich net weiterkomm