Benötige eure Unterstützung:

Ich habe nun alles genauso "eingesetzt" : Mein aktueller Entwurf beim freehoster bplaced

Aber irgendwie scheint etwas nicht zu stimmen, denn wenn ich:

.slide-in {
	--panel-width: 10em;
	height: 3em;
	display: flex;
	align-items: start;
	margin-inline: auto 0;
	width: fit-content;
	transition: translate 0.3s;
	
	&:has(button:not([aria-expanded="true"])) {
				translate: var(--panel-width);
	}
	
	ul {
		z-index: 1;
		background: white;
		outline: thin solid silver;
		width: var(--panel-width);
		list-style: none;
		margin: 0;
		line-height: 1.1;
	}
	
	li {
		padding-block: 0.2em;
	}
	
	a {
		color: currentColor;
		text-decoration: none;
	}
}

genauso einsetze, scheint etwas mit den { } nicht zu stimmen. Denn wenn ich hinter dem { von .slide-in { tippe dann wird nicht das } ganz am Ende rot sondern ganz woanders. Also da scheint etwas nicht zu stimmen.

Das ist genau DAS was ich meinte mit, das bei CODEPEN dieses CSS zwar funzt, nicht aber wenn man es "ubertrgägt / übersetzt".

Also wie geht es nun richtig?

Morgen kümmere ich mich um die kleineren Devices und dem Fall falls scripte unterbunden werden.

Ich habe vor mit <noscript> </noscript> im head auf eine CSS zu verwiesen für diesen Fall.

div id="global-navigations" ist ein GRID das ich dort zweizeilig mache ( Grid ROWs ) , in der ersten Zeile das Menü in der zweiten Zeile darunter die Inhaltübersicht.

So soll es angezeigt werden wenn javascript aus ist.

Gute n8 der einsiedelnde