Hallo zusammen,
bei diesem Codeabschnitt für die Animation eines Drop-Down Menüs kommt es zu einer seltsamen Nebenfunktion in Chrome. In firefox funktioniert alles, in Chrome jedoch nicht. Bei Áufruf der Website fliegt das Menü seitlich ein, ich verstehe nicht, wieso. Der Quelltext bezieht sich nur auf das einfliegende Div. Da es schwierig zu beschreiben ist, HIER ein Link zu dem Video.
Code
.dropdown-inhalt{
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
width: 100%;
-webkit-transform: translateY(-2em);
-ms-transform: translateY(-2em);
transform: translateY(-2em);
z-index: -1;
-webkit-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
-o-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
background: #ddd;
width: auto;
}
.dropdown:focus .dropdown-inhalt,
.dropdown:focus-within .dropdown-inhalt,
.dropdown:hover .dropdown-inhalt{
visibility: visible;
opacity: 1;
z-index: 1;
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition-delay: 0s, 0s, 0.3s;
-o-transition-delay: 0s, 0s, 0.3s;
transition-delay: 0s, 0s, 0.3s;
}Vielen Dank im Voraus und viele Grüße
