Frage Probleme bei dropsdown Menü

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

lina123123

Neues Mitglied
22 Mai 2018
18
0
1
23
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
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.142
236
63
19
Nenn mich dumm, aber ich sehe da nirgends ein Dropdown... Könntest du mal CSS und HTML nur für das Menü reinschicken?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Da hatte ich auch gewisse Problem, das Menü ausfindig zu machen ...
Der Grund für dein Problem ist folgendes: Du hast die ul-Elemente der Untermenüs absolut positioniert. Der Bezugspunkt für die Positionierung ist dann das erste Elternelement mit position:relative;, in diesem Fall .navtext. D. h. damit sich die Untermenüs an den Oberpunkten ausrichten, muss Du diesen (den Oberpunkten)position:relative;zuweisen:
CSS:
nav>ul>li {
    position: relative;
}
 
Zuletzt bearbeitet:

Sailor

Aktives Mitglied
14 Juli 2017
512
67
28
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!
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Richtig ist dann wohl, dass dieses <li> relativ oder static positioniert sein muss
??? Genau das macht doch das CSS, das ich gepostet habe.
Und das ul des Untermenüs hat der/die TO bereits absolut positioniert.
 

Sailor

Aktives Mitglied
14 Juli 2017
512
67
28
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;
}
 

djheke

Aktives Mitglied
8 Februar 2012
925
84
28
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>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Versuch macht kluch:
http://webentwicklung.ulrichbangert.de/kleingarten.html
Einzige Änderung gegenüber der Version des TO: Dieses CSS wurde hinzu gefügt:
CSS:
nav, header {
  background-color: grey !important;
}
nav>ul>li {
  position: relative;
}
Jetzt ist das li des Obermenüs der Bezugspunkt und das Untermenü richtet sich daran aus.
Dass das Untermenü nach rechts verschoben ist, liegt am left: 120px; und dem padding des ul.
Das zu bereinigen, sollten wir der Eigeninitiative des TO überlassen.
Selbstverständlich macht float keinen Sinn, wenn schon absolut positioniert wurde, aber das ist nicht der Grund für das Problem des TO.
https://stackoverflow.com/questions/11333624/float-right-and-position-absolute-doesnt-work-together
Wie ich sehe, war djheke schneller, aber ich schicke dies trotzdem mal ab.
BTW: Mein Posting #4 war mit den Developer Tools getestet.
 
Zuletzt bearbeitet:

lina123123

Neues Mitglied
22 Mai 2018
18
0
1
23
wenn man auf meinen link klickt sieht man auch bei der section Termine das es irgendwie alles rechts verschoben ist.... woran liegt das?
 

lina123123

Neues Mitglied
22 Mai 2018
18
0
1
23
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?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
PS: Ups, mir scheint, da habe ich dich falsch verstanden: Du meinst jetzt nicht das Menü sondern die Termintabelle weiter unten?