• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Probleme bei dropsdown Menü

L

lina123123

Neues Mitglied
Meine Unterpunkte egal von welchem Oberpunkt des dropdown Menüs sind immer nur unter dem ersten Oberpunkt egal wo ich rauf gehe es ist immer nur unter dem erstes Punkt zu sehen. Wie bekommt man es hin das immer die Unterpunkte unter dem zugehörigen Oberpunkt drunter stehen? Liebe Grüße und danke im Voraus.

https://pastebin.com/UPDagEY3
 
Nenn mich dumm, aber ich sehe da nirgends ein Dropdown... Könntest du mal CSS und HTML nur für das Menü reinschicken?
 
Sempervivum schrieb:
D. h. damit sich die Untermenüs an den Oberpunkten ausrichten, muss Du diesen position:relative;zuweisen:
CSS: 
nav>ul>li {
position: relative;
}
Zum Vergrößern anklicken....
Ich glaube das <li> ist der 'Obermenüpunkt' für das darin enthaltene <ul>.
Richtig ist dann wohl, dass dieses <li> relativ oder static positioniert sein muss... das Untermenü selbst (das <ul>) muss dann aber in diesem 'li' absolute positioniert sein.
Also ...
CSS: 
nav>ul>li>ul {
  position: absolute;
}
Sonst würde ja auch bei jedem Dropdown die ganze Seite unterhalb des Menüs sich um die Menühöhe nach unten verschieben!
 
Sempervivum schrieb:
Und das ul des Untermenüs hat der/die TO bereits absolut positioniert.
Zum Vergrößern anklicken....
.. stimmt... hab's gefunden! Ab Zeile 878 im Link zum Thema...
Aber da steht dann
CSS: 
.navtext > li >ul{
  position: absolute;
  top: 42px;
  left: 120px;
  width: 120px;
  display:none;
  float:left;
}
 
.navtext > li:hover > ul{
display:block;
}
Das genau könnte die Probleme verursachen ... die Festlegung von 'top', 'left' und 'float' sorgen hier dafür, dass sich das Untermenü an der falschen... immer gleichen Stelle öffnet.
Richtig wäre hier wohl...
CSS: 
.navtext > li >ul {
  position: absolute;
  width: 120px;
  display: none;
}
 
.navtext > li:hover > ul {
display: block;
}
 
Oder so?!
Code: 
<!doctype html> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>Garden7</title> 
 
 
<style> 
nav { 
 float:right; 
 width:50%; 
} 
 
nav ul { 
 list-style:none; 
 background:#ddd; 
 padding:0; 
 margin:0; 
} 
 
nav ul li { 
 display:inline-block; 
 position: relative; 
} 
  
nav li { 
 padding:10px; 
} 
nav ul li ul{ 
  position: absolute; 
  top: -9999em; 
  left: -9999em; 
} 
  
nav ul ul li { 
 display:block; 
} 
nav ul li:hover ul{ 
 left:0; 
 top:auto; 
 width:auto; 
} 
</style> 
   
</head> 
<body> 
    <nav> 
      <ul> 
        <li><a href="#home"></a></li> 
        <li><a href="#kleingartenverein">Kleingartenverein</a> 
          <ul> 
              <li><a href="#Verein">Verein</a></li>  
              <li><a href="#termine">Termine</a></li>  
              <li><a href="#parzellen">Parzellenverwaltung</a></li>  
            </ul> 
          </li> 
             
        <li><a href="#Parzellenverwaltung">Urban Gardening</a> 
          <ul> 
              <li><a href="#UG">UG was ist das?</a></li>  
              <li><a href="#ugundkgv">UG im KGV</a></li>  
              <li><a href="#termin">Angebote/Termine</a></li>  
            </ul> 
          </li> 
        <li><a href="#urbangardening">Galerie</a></li> 
        <li><a href="#angebotetermine">Kontakt</a></li> 
        <li><a href="#impressum">Impressum</a></li> 
      </ul> 
    </nav> 
  
</body> 
</html>
 
wenn man auf meinen link klickt sieht man auch bei der section Termine das es irgendwie alles rechts verschoben ist.... woran liegt das?
 
und die zweite frage wäre dann noch warum mein Menü nicht auf den sinkt Termine springt wenn ich da rauf gehe? ich muss ja immer das Menü mit dem href versehe und dann die section id dort eintragen oder?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben