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

Frage Probleme bei dropsdown Menü

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
 
Werbung:
Nenn mich dumm, aber ich sehe da nirgends ein Dropdown... Könntest du mal CSS und HTML nur für das Menü reinschicken?
 
Werbung:
D. h. damit sich die Untermenüs an den Oberpunkten ausrichten, muss Du diesen position:relative;zuweisen:
CSS:
nav>ul>li {
position: relative;
}
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!
 
Und das ul des Untermenüs hat der/die TO bereits absolut positioniert.
.. 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>
 
Werbung:
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?
 
Werbung:
Zurück
Oben