Hallo

Ich habe nun alles genauso "eingesetzt"… 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".

Gehe bitte davon aus, dass, wenn es im Codepen funktioniert, es auch in einem einigermaßen aktuellen Browser funktioniert. Eventuell, und meiner Meinung nach mit aller Wahrscheinlichkeit, wird es aber mit den Highlightning-Regeln deines Editors oder deiner IDE nicht korrekt angezeigt.

Das beeinträchtigt aber nicht die Funktionalität im Browser. Dort muss und wird es funktioneren (den Test mit einem nicht veralteten Browser vorausgesetzt).

Tschö, Auge