UL-Höhe an umschließenden Container anpassen

[owned139]

Hallo liebe Community,
ich Arbeite zur Zeit an einer Navigation und habe das Problem, dass die UL-Container der Subnavi alle eine Unterschiedliche Höhe haben (je nach Anzahl der li-Elementen).

Wie stell ich es an, dass die UL-Elemente sich von der Höhe her dem umschließenden Element anpassen (z.b. li).

Navi sieht wie folgt aus:
Menüpunkt1 Menüpunkt2 Menüpunkt3
Element1 Element1 Element 1
Element 2

 

[dreifragezeichen]

Die Höhe des Eltern- und/oder Nachfolgeelements ergibt sich gemäß dem W3C durch dessen Inhalt, in deinem Fall, die <li>-Menüpunkte des jeweiligen <ul>-Untermenüs.

Ansonsten, wenn dir die Höhe des umschließenden <li>-Elements bekannt ist, sollte es ein leichtes Rechenexempel sein, das offene Restmaß zu ermitteln. JS + DOM sind dir behilflich, falls die Höhe der Mutterbox im CSS als deklarierte Regel nicht vorliegt.

 

[dreifragezeichen]

Nachtrag zum Grundverständnis: Das <ul>-Element der oberen Menüebene passt seine Höhe dem größten (höchsten) Untermenüeintrag an, und nicht umgekehrt, die unterschiedlich hohen (oder kürzeren) Untermenüebenen dem Elternelement.

 

[owned139]

Mir ist die Höhe des li-Elementes ja leider nicht bekannt :/

Hier ist nen Code-Stück:

<ul>
  <li><a href="">Kategorie 1</a>
    <ul>
      <li><a href="">submenu 1</a></li>
      <li><a href="">submenu 2</a></li>
      <li><a href="">submenu 3</a></li>
    </ul>
  </li>
  <li><a href="">Kategorie 2</a>
    <ul>
      <li><a href="">submenu 1</a></li>
      <li><a href="">submenu 2</a></li>
    </ul>
  </li>
  <li><a href="">Kategorie 3</a>
    <ul>
      <li><a href="">submenu 1</a></li>
    </ul>
  </li>
<ul>

Jetzt hab ich allerdings das Problem, dass wenn ich den submenüs ein Border-left gebe das diese nicht alle gleich hoch sind, was sie aber sein sollen...ich verzweifel gerade echt :/

*Edit:
Ich will das ganze in css lösen...nen JS ansatz hab ich selbst auch aber css erscheint mir da sauberer und Ressourchenschonender.

 

[dreifragezeichen]

Was sollen wir hier im Fachforum für CSS zu deinem 0-8-15-HTML-Snippet eines Listenmenüs sagen, wenn das zugehörige und entscheidende Stylesheet nicht vorliegt?

Von einer reinen CSS-Lösung kannst du dich gleich mal verabschieden, wenn dir zuvor die Höhe des <li>-Elements nicht bekannt ist.

 

[owned139]

Hmm...hast recht, sorry.

#navi-wrap{
	width:960px;
	margin:110px auto auto auto;
}
#navi-wrap ul{
	padding:0;
	margin:0;
	list-style-type:none;
	clear:both;
}
#navi-wrap ul li ul{
	padding:0;
	margin:0;
	list-style-type:none;
}
#navi-wrap ul li{
	float:left;
}
#navi-wrap ul li ul li{
	float:none;
}
#navi-wrap ul li a{
	height:40px;
	display:block;
	font-size:16px;
	min-width:80px;
	text-decoration:none;
	color:#999;
	padding:10px 25px 0 15px;
	letter-spacing: 0.75px;
	border-left:1px solid #222;
}
#navi-wrap ul li a:hover{
	color:#fff;
}
#navi-wrap ul li ul li a{
	display:block;
	font-size:11px;
	text-decoration:none;
	color:#666;
	height:18px;
	padding:0 0 0 15px;
	border:none;
	text-transform:uppercase;
}
#navi-wrap ul li ul li a:hover{
	color:#fff;
}
#navi-wrap ul li.first-navi-link a{
	border:none;
}
#navi-wrap ul li a .desc{
	color:#666;
	font-size:12px;
	font-style:italic;
}
#navi-wrap ul li ul{
	display:none;
	border-left:1px solid #222;
	height:auto;
	overflow:hidden;
}
#navi-wrap ul li.first-navi-link ul{
	border:none;
}
#navi-wrap ul:hover ul{
	display:block;
}

Wenn ich das ganze aufsliden lassen will, würde das dann auch funktionieren?
Das UL würde dann ja anfangs eine Höhe von 0px haben...also kann ich es ja nicht berechnen oder sehe ich das falsch?

Seid ihr hier immer so unfreundlich?

 

[dreifragezeichen]

Nochmal zum Mitschreiben: Kinderelemente gleichen nicht automatisch ihre Höhe die ihres Elterelements an.

Also mußt du deine JS-Lösung aus der Schublade hervorkramen, die sicherlich die unbekannten Resthöhen gegenüber dem <li>-Element ermittelt, und dem jeweilgen <ul>-Element zuweist ;-)

 

[owned139]

Nochmal zum Mitschreiben: Kinderelemente gleichen nicht automatisch ihre Höhe die ihres Elterelements an.

Ist mir bekannt, steht aber auch so gut wie in jedem Post von mir (indirekt) und so gut wie in jedem Post von mir frage ich auch wie ich das "Problem" beheben kann.

 

[dreifragezeichen]

Meine Beiträge hast du gelesen, "1 und 1" kannst du auch zusammenzählen?

Fein Das "Problem" behebt hier in diesem Fall der unbekannten Elementhöhe dein propagierter JS-Code.

Fertitsch ;-)

 

[dreifragezeichen]

Ist mir bekannt, steht aber auch so gut wie in jedem Post von mir (indirekt) und so gut wie in jedem Post von mir frage ich auch wie ich das "Problem" beheben kann.

Auch wenn du deine Frage hier noch mehrfach wiederholst, läßt sich keine CSS-Lösung herbeizaubern, weil es sie aus besagtem Grunde schlichtweg nicht gibt.