Hallo zusammen,
seit einigen Tagen bin ich auf der Fehlersuche eines banalen Problems.
Weshalb funktioniert denn hier der "Lavalamp"-Effekt unter dem Menü nicht mehr, sobald der letzte Menüpunkt ("Unterstützen") 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;
}
Zur besseren Verständlichkeit des Problems habe ich sämtlichen unnötigen CSS-Inhalt entfernt. Es wird also tatsächlich nur der gewünschte "Schwebebalken" angezeigt.
Es funktioniert ja soweit alles problemlos - lediglich bei aktivem letztem Menüpunkt funktioniert die Lavalamp nicht mehr, sobald man über das Menü hovert.