CSS: Lavalamp-Effekt im Menü - bei aktivem Last-Child keine Funktion mehr
Hallo zusammen,
seit einigen Tagen bin ich auf der Fehlersuche eines banalen Problems. Bennie hat mir schon ganz gut weitergeholfen, aber ich habe noch nicht des Rätsels Lösung gefunden. :D
Weshalb funktioniert denn hier der "Lavalamp"-Effekt unter dem Menü nicht mehr, sobald der letzte Menüpunkt ("Mitmachen") aktiv ist? Wähle ich einen anderen Menüpunkt aus, dann funktioniert wieder alles wie gewohnt. Ich schätze, dass ich irgendwo noch einen Denkfehler mit der strong.active-Klasse habe.
Das zugehörige CSS:
Code:
#navigation ul {
position:relative;
width:50em;
margin:0 auto;
padding:0;
white-space:nowrap;
display: flex ;
}
ul li {
display:inline-block;
text-align:center;
}
ul li a,
ul li a:hover,
ul li a:focus,
ul li strong.active {
position:relative;
top:0;left:0;right:0;bottom:0;
display:inline-block;
box-sizing:border-box;
font-weight:normal;
width:10em;
/*Transition*/
-webkit-transition:width .3s,right .3s;
-moz-transition:width .3s,right .3s;
-o-transition:width .3s,right .3s;
transition:width .3s,right .3s;
}
ul li:nth-child(1) a {width:10em;}
ul li:nth-child(2) a {width:10em;}
ul li:nth-child(3) a {width:10em;}
ul li:nth-child(4) a {width:10em;}
ul li:nth-child(5) a {width:10em;}
ul li:last-child a::after {
content:"";
position:absolute;
right:inherit;
bottom:-3px;
width:inherit;
height:3px;
pointer-events:none;
/*transition*/
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}
ul li:nth-child(1) ~ li:last-child a {right:40em;width:10em;}
ul li:nth-child(2):hover ~ li:last-child a {right:30em;width:10em;}
ul li:nth-child(3):hover ~ li:last-child a {right:20em;width:10em;}
ul li:nth-child(4):hover ~ li:last-child a {right:10em;width:10em;}
ul li:nth-child(5):last-child:hover a {right:0;width:10em;}
ul li:hover ~ li:last-child a::after,
ul li:last-child:hover a::after {background:#c351fa;}
ul li:last-child a {min-width:10em;max-width:10em;}
ul li a:hover,
ul li a:focus, {
color:#c351fa;
background-color:rgba(255,255,255,1);
/*transition*/
-webkit-transition:width .3s,right .3s,background-color .3s;
-moz-transition:width .3s,right .3s,background-color .3s;
-o-transition:width .3s,right .3s,background-color .3s;
transition:width .3s,right .3s,background-color .3s;
}
Es funktioniert ja soweit alles problemlos - lediglich bei aktivem letztem Menüpunkt funktioniert die Lavalamp nicht mehr, sobald man über das Menü hovert.
Update:
Falls der obige Link nicht funktionieren sollte: https://test.passion.earth/startseite.html
Liste der Anhänge anzeigen (Anzahl: 1)
Leider bei mir noch immer nicht.
Anhang 24557