MundM: Höhe eines relativen Elements an ein absolutes anpassen

SELF-Forum

Höhe eines relativen Elements an ein absolutes anpassen

MundM
– Informationen zu den Bewertungsregeln

Guten Tag zusammen,

ich habe folgendes Problem bei der Gestaltung einer Navigation mit CSS:

der Rahmen der Navigation bildet das ul-Element, welches relativ positioniert ist. Die Listenpunkte innerhalb dieses ul-Elements sind mit display: inline-block formatiert, sodass sich aus den Listenpunkten eine vertikale Menüleiste bildet (nennen wir sie Tabs).

Bei Klick auf einen Tab öffnet sich ein Untermenü. Sprich: innerhalb dieses aktiven li-Elements bildet sich ein neues ul-Element. Um dieses neue ul-Element ganz nach links zu positionieren führt meiner Meinung nach (!) kein Weg daran vorbei, es absolut positionieren mit der Zusatzangabe left: 0;

Beispieldatei:

  
<html>  
<head>  
<style>  
  
* { margin:0; padding:0;}  
  
#rahmen {  
	position: relative;  
	width: 310px;  
	border: 1px solid red;  
}  
  
#rahmen li {  
	display: inline-block;  
	width: 100px;  
	text-align: center;  
}  
  
#unter_menue {  
	position: absolute;  
	left: 0;  
	border: 1px solid blue;  
}  
  
#unter_menue li {  
	display: block;  
}  
  
</style>  
</head>  
  
<body>  
<ul id="rahmen">  
  <li>Tab 1</li>  
  <li>Tab 2  
    <ul id="unter_menue">  
      <li>Unterpunkt 1</li>  
      <li>Unterpunkt 2</li>  
    </ul>  
  </li>  
  <li>Tab 3</li>  
</ul>  
</body>  
</html>

Mein Problem ist, dass sich die Höhe des Äußeren ul-Elements (#rahmen) nur an die Höhe der einzelnen Tabs anpasst und das Untermenü sozusagen ausschließt. Ich weiß, dass das an der absoluten Positionierung des Untermenüs liegt. Aber nach tagelangem googlen, lesen und probieren finde ich einfach keinen Weg das Problem zu lösen :(

Hoffe ihr könnt mir da helfen...
Gruß

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Höhe eines relativen Elements an ein absolutes anpassen

    Antipitch
    – Informationen zu den Bewertungsregeln

    Hi MundM,

    dann lass das

    #rahmen li {
    display: inline-block;
    }

    doch mal weg und mach so:

    #rahmen li {  
float:left;  
position:relative;  
}

    Sonst hier gucken (aber nicht anfassen).

    cheers
    Antipitch

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln