Icon Flyout / slidern ähnlich wie bei meiner Navigation

[einsiedler]

Hallo Leute,

Mein Testentwurf gibt es hier: Misanthrop bei Bplaced

Ich möchte das SVG - Icon oben genauso animieren wie das Menü darunter.

ICON - Flyout

<div id="icon-nav-span" class="icon-span">
					<nav id="icon-nav" class="site-navigation" tabindex="-1">
						<!--  <button id="icon-toggle" aria-expanded="false" aria-controls="menu"></button> -->
						<span class="main-headline-span">
							<a class="sitelink-title-tagline" href="http://misanthrop.bplaced.net/test/open-public__july24/entwurf_14-04-25.html">						
								<h1>
									maxmustermann.eu
								</h1>
							</a>
						</span>
					</nav>
</div>

Nun habe ich da nun das Problem das sich die beiden !Menüs! einander ins Gehege kommen.

Navigation - Flyout

<div id="navi-span">
			<nav id="main-nav" class="site-navigation" tabindex="-1">
				<button id="toggle" aria-expanded="false" aria-controls="menu"></button>
				<ul>
					<li><a aria-current="page" class='menu nav-highlight' href='#'>Aktuelles</a></li>
					<li><a class='menu' href='#'>Arbeiten</a></li>
					<li><a class='menu' href='#'>CV</a></li>
					[ ... }
				</ul>
			</nav>
</div>

/* ++  HAUPTNAVIGATION / BUTTON  -- rechte Seite   ++ */

	[aria-expanded] {
		width:45px;
		height: 45px;
		background: transparent;
		color: transparent;
		border: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1,2 h7 M1,5 h7 M1,8 h7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	}
	[aria-expanded="true"] {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M2,2 l6,6 M8,2 l-6,6' fill='none' stroke='%23c82f04' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	}

	
	.site-navigation > ul {
		padding: 0.9rem;
	}
	
	.site-navigation li a {
		font-size: 1.55rem;
		font-style: bold;

	}
	
	#navi-span {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		height: auto;
		
	}
	#main-nav {
		display: flex;
		justify-content: flex-end;
		flex-basis: auto;
		height: fit-content;
	}
	#main-nav > * {
		font-size: 1.55rem;
		font-style: bold;
	}
	
	button {
		border: none;
		margin: 0.7rem;
	}
	
	.site-navigation {
		overflow: hidden;		
	}
	.site-navigation > ul {
		margin-top: 1em;
		margin-left: 0.3em;
		padding: 0.4em 0.9em;
		border: dashed 5px red;		
	}
	#main-nav [aria-expanded]~ul {
        display: block !important;
        margin-right: -12.3em;
        transition: margin-right 0.85s;
		width: 12em;
		background: rgb(190,190,190,0.2);
	}
	#main-nav [aria-expanded="true"]~ul {
        margin-right: 0;
		background: orange;
		
    }

Wie also muss ich die [aria-expanded] -- background-images "individualisieren" das sie nur auf die jeweilige vorgegebene Funktion angewendet wird und nicht auch noch die andere?

Zudem komme ich da nicht mit den richtigen Kombinatoren klar die man hier wohl braucht.

Kann mir bitte jemand helfen.

Danke im Vorraus.

Der einsiedelnde