Hallo zusammen,
bei diesem Codeabschnitt für die Animation eines Dropdown Menüs kommt es zu einer seltsamen Nebenfunktion in Chrome. In Firefox funktioniert alles, in Chrome jedoch nicht. Bei Aufruf 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, <a href="https://youtu.be/Fv3pXSdu06Y">HIER</a> ein Link zu dem Video.
Code
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Home</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color: #f7f7f7;
font-family: sans-serif;
font-weight: 100;
}
nav{
font-family: sans-serif;
font-size: 16px;
background:#99c9ff;
width: 100%;
height: 50px;
padding: 5px 0;
border-bottom: 1px solid lightgrey;
}
nav ul li img{
margin:0 10px;
height: 29px;
}
nav ul{
display:flex;
padding-top:12px;
}
nav ul li{
flex:1;
list-style:none;
}
.dropdown-inhalt{
display:flex;
flex-direction:column;
opacity: 0;
position:absolute;
top: -100px;
flex:1;
transform: translateY(-1em);
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s;
background: transparent;
}
.dropdown:focus .dropdown-inhalt,
.dropdown:focus-within .dropdown-inhalt,
.dropdown:hover .dropdown-inhalt{
visibility: visible;
top:40px;
opacity: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;
}
.droplinkslast{
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background: #f7f7f7;
transition: background-color 0.5s ease-out;
transition: border-radius 0.5s ease;
}
.droplinks{
border-radius: 0px;
background: #f7f7f7;
transition: background-color 0.25s ease-out;
transition: border-radius 0.5s ease;
}
.droplinksfirst{
background: #f7f7f7;
transition: background-color 0.25s ease-out;
transition: border-radius 0.5s ease;
}
.droplinks:hover,
.droplinksfirst:hover,
.droplinkslast:hover{
background-color: #ddd;
border-radius: 15px;
}
.dropdown-inhalt a:link,
.dropdown-inhalt a:active,
.dropdown-inhalt a:visited{
display: block;
font-size: 18px;
padding: 0.5em 1em;
text-decoration: none;
color: black;
}
a.normalLink:link,
a.normalLink:visited,
a.normalLink:active{
color:black;
font-size: 18px;
text-decoration: none;
filter: invert(0%);
transition: 0.25s filter linear;
}
a.normalLink:hover{
text-decoration: none;
filter: invert(100%)
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<a href="index.html">
<img src="/image/Logo1.png" alt="Home">
</a>
</li>
<li><a href="Client.html" class="normalLink">Client</a></li>
<li><a href="Server.html" class="normalLink">Server</a></li>
<li><a href="Switch.html" class="normalLink">Switch</a></li>
<li class="dropdown">
<a href="Modem_Router.html">Modem & Router</a>
<ul class="dropdown-inhalt">
<li class="droplinksfirst">
<a href="Modem_Router.html">Einführung</a>
</li>
<li class="droplinks">
<a href="Modem_Router.html">Link 1</a>
</li>
<li class="droplinkslast">
<a href="Modem_Router.html">Link 2</a>
</li>
</ul>
</li>
<li>
<a href="impressum.html" class="normalLink">Impressum</a>
</li>
</ul>
</nav>
</body>
</html>