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

Display Flex und subchilds

unique24

Mitglied
Hallo,

ich baue mir ein top menu und hab folgendes Problem:
HTML:
 <ul class="lv2">
      <li><a href="#"><img src="https://via.placeholder.com/80x30.png?text=cat">item 1 von all otheggggggggggggggggggggggggggggggr</a>
        <ul class="sub lv3">
          <li><a href="#">
          <img src="https://via.placeholder.com/30x30.png?text=cat">
         item 1.1ggggggggggggggggggggggggggggggggggg</a></li>
          <li><a href="#">item 1.1</a></li>
          <li><a href="#">item 1.1</a></li>

Elemente von lv2 werden als flex dargestellt, mit wrap:
CSS:
.lv2,
.lv3_d {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: center;
  list-style: none;
}

.sub {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: center;
  list-style: none;
  width: 100%;
  position: absolute;
  left: 0px;
  background: white;
  padding-top: 10px;
  padding-left: 10px;
}

Ich möchte das das sub auf die volle Breite dargestellt wird ... direkt unter dem Hauptmenü Punkte.
Also hbe ich "position: absolute;" genommen ... das passt, da ich in einem anderen element die fixe Höhe ovn "50px" zuweise.

aber;
wenn das Top menu umbricht, sollte natürlich ein Subelement weiter unten dargestellt werden.

Wie kann ich das erreichen? Ich müsste das ".sub" direkt unter dem <li> element anzeigen.

Danke!
 
Werbung:
1. Unvollständiger Quelltext

2. Unsinn wie otheggggggggggggggggggggggggggggggr und 1ggggggggggggggggggggggggggggggggggg

3. position: absolute

4. CSS passt nicht so recht zum HTML

Und keine eindeutige Problembeschreibung. Wie sollen wir dir da helfen?
 
Zuletzt bearbeitet:
Zurück
Oben