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

Leider funktioniert der Link nicht. Damit kann man sich das nicht anschauen.

Besten Dank für Deine Rückmeldung! ;)

Zitat:

---

Zitat von mlweb

Leider funktioniert der Link nicht. Damit kann man sich das nicht anschauen.

---

Tatsächlich? Wenn ich auf "hier" klicke, dann wird bei mir die Seite geöffnet.

Zur Sicherheit aber noch mal alleinstehend:

https://test.passion.earth/startseite.html

Zur besseren Verständlichkeit des Problems habe ich sämtlichen unnötigen CSS-Inhalt entfernt. Es wird also tatsächlich nur der gewünschte "Slider" angezeigt. :)

Leider bei mir noch immer nicht.

Anhang 24557

So, jetzt funktioniert der Link. :o