Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 20.07.2019, 09:48
crane crane ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 26
crane befindet sich auf einem aufstrebenden Ast
Standard Elternelement uneinbeflusst vom Kindelement bei Liste

Hallo alle zusammen,
ich bin mit meinem Menü schon etwas weiter gekommen. Nun möchte ich es schaffen, dass bei dem Menü das aus Listen besteht das Elternelement von den Änderungen im Kindelement nicht beeinflusst wird. Das heißt in meinem Fall:
Das Elternelement hat eine bestimmte Größe die kleiner als die Größe des Kindelement ist. Nun möchte ich das sobald das Kindelement dargestellt wird das Elternelement nicht in der Größe und der Position vom Kindelement beinflusst wird. Aktuell ist es so sich die Position vom Elternelement ändert, eine Lücke zum nächsten Elternelement entsteht und das Kindelement somit nicht über in die vertikale Postion vom nächsten Elternelement ragt.

Es soll letztendlich so wie auf dem Bild aussehen. Hier ist zur Verdeutlichung ein Menüpunkt blau markiert.

Mein dazugehöriger Code:
HTML-Code:
<link rel="stylesheet" href="nav2.css">

<style>
li.hm1
{
float: left;
}
<div style="float: right;" ><label for="show-menu" class="show-menu" style="position: absolute; border: 1px solid blue; right:100px; top:0;font-size:25pt;"></label>
	<input type="checkbox" id="show-menu" role="button">
	<ul class="menuc">
		<li class="hm1"><a href="#">Home</a></li>
		<li class="hm1"><a href="#">&Uuml;ber mich</a></li>
		<li class="hm1"><a href="#">Konzept</a>
			<ul class="hidden"">
				
				<li><a href="#">Hakomi</a></li>
				<li><a href="#">Chen Taiji </a></li>
				<li ><a href="#">Qi Gong und Meditation</a></li>

			</ul>
		</li>
		<li class="hm1"><a href="#">Methoden</a>
			<ul class="hidden">
				
				<li><a href="#">Was ist Hakomie</a></li>
				<li><a href="#">Themen</a></li>
				<li><a href="#">Termine</a></li>

			</ul>
		</li>
		<li class="hm1"><a href="#">Medien</a>
			<ul class="hidden">
				
				<li><a href="#">Bilder</a></li>
				<li><a href="#">Videos</a></li>
				
			</ul>
		</li>
		<li class="hm1"><a href="#">Links</a></li>
		<li class="hm1"><a href="#">Kontakt</a></li>
	</ul>
</div>
CSS:
Code:
ul {
	position: relative;
	z-index: 1;
	list-style-type:none;
	margin:0px 0px;
	padding:0px 0px;
	
	
	text-align: justify;
    	
	
	
}

/*Create a horizontal list with spacing im*/
li {
	
}

/*Style for menu links im*/
li a {
	display:block;
	width:100px;
	float:none;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #ffffff;
	background: #000000;
	text-decoration: none;
	
}

/*Hover state for top level links im*/
li:hover a {
	
	background:red;
	
}



/*Style for dropdown links im*/
li:hover ul  a {
	min-width:140px;
	color: #000000;
	background: blue;
	
}

/*Hover state for dropdown links maybe*/
li:hover ul a:hover {
	color: #000000;
	background: #999999;
}


/*Hide dropdown links until they are needed im*/
li ul {
	display: none;
}

/*Make dropdown links vertical im*/
li ul li {
	display: block;
	float: none;
	
	
}



/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
	display: block;
	position:relative;
	top:0;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	width: 50px;
	height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #000000;
	
	text-align: center;
	
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
	display: none;
	-webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .menuc{
	display: block;
}

Das mit der Check box und den daraus entstehenden Veränderungen haben mit meiner Frage nichts zu tun. Der Button kommt letztendlich abhängig von der Fenstergröße zum Vorschein.
Das Ergebnis vom Code sieht wie auf dem 2. Bild aus.
Vielleicht hat einer eine Idee was und wo im Code ich was für meine Lösung ändern muss.

Vielen lieben Dank
Angehängte Grafiken
Dateityp: jpg Menue.jpg (18,3 KB, 5x aufgerufen)
Dateityp: jpg Menue2.jpg (21,9 KB, 2x aufgerufen)

Geändert von crane (20.07.2019 um 18:21 Uhr)
Mit Zitat antworten
Sponsored Links