submenu left=0 für Hintergrund, aber Textposition wie bei left=auto

[jeipack]

Hi

Ich arbeite gerade an einem Menu und irgendwie steh ich auf dem Schlauch.
Ich will ein Menu mit aufklappbarem Untermenu. Das Untermenu soll auf der ganzen Breite einen grauen Hintergrund haben. Dafür mache ich beim Submenu "display: absolute" und "width: 100%" und "left: 0". So weit so gut, dabei wird der Text im Submenu aber auch ganz nach links verschoben und das soll nicht so sein. Der Text sollte an der position sein, als wenn ich "left: auto" hätte.


Bildlich gesprochen
So soll es aussehen:

So sieht es im Moment aus:

Und einen Fiddle gibt es auch: https://jsfiddle.net/srLaxrch/

Einfach bei Title5 hovern. Dann soll der graue Balken über die ganze Breite gehen (ist so), aber der Unterpunkt "Title5.1" direkt unter "Title5" sein.

Hat jemand eine Idee?

(In meinem Fall habe ich einen Workaround gefunden, aber der würde nicht allgemein funktionieren)

 

[Sempervivum]

Dieses HTML ist nicht valide:

Element div cannot be nested inside element 'ul'

Ich würde das div, das den Balken über die ganze Breite bildet, unabhängig von der Liste in deinem nav-Tag anlegen. Dann kannst Du die Untermenüs problemlos so positionieren, dass sie unter dem übergeordneten Menüpunkt liegen.
BTW: Ist das gewollt, dass die Punkte in den Untermenüs nebeneinander dargestellt werden?

 

[jeipack]

Das hab ich schon so gemacht, da in meinem Fall dieser Balken eine fixe Höhe hat.
Aber wie könnte ich dann dieses Div von der Grösse her dem Inhalt anpassen? Wenn ich es ja unabhängig habe, geht das nicht mehr. ?

Ja, dass die Punkte im Untermenu nebeneinander sind ist gewollt. Allerdings sieht es im Fiddle nicht so gut aus, da einiges an CSS fehlt.

Bezüglich dem Div class="clear" innerhalb von ul. Ich weiss dass es nicht ganz valide ist, aber ich brauche (beziehungsweisse will) ein Pseudoelement um den float zu cleanen. Damits valid ist, müsste ich ein "li" nehmen, wäre sauberer.

 

[SpiceLab]

BTW: Ist das gewollt, dass die Punkte in den Untermenüs nebeneinander dargestellt werden?

Das Konzept nennt sich Dropline-Menu.

Bezüglich dem Div class="clear" innerhalb von ul. Ich weiss dass es nicht ganz valide ist, aber ich brauche (beziehungsweisse will) ein Pseudoelement um den float zu cleanen. Damits valid ist, müsste ich ein "li" nehmen, wäre sauberer.

Warum dann nicht einfach :after?

nav:after {
  content: "";
  display: table;
}

nav:after {
  clear: both;
}

Möglicher Lösungsansatz https://jsfiddle.net/spicelab/gbwa7wvk/

 

[jeipack]

Ich vergesse die Pseudoelemente :before und :after viel zu oft. Danke fürs Erinnern, ist die schönste Lösung!

Zum Lösungsansatz: Der Border hat halt immer noch eine fixe Höhe. Was aber wenn ich diesen grauen Hintergrund abhängig vom Content im Submenu höher haben will?