I have some problems with the animation of the Dropdown menu. I just started with html and css and need some help with it. Could please somebody post some solutions how to animate the dropdown (to slide in, or become slowly visible, maybe with keyframes). I tried some time myself but didnt find a way how to do it.

Thanks for spending you time on this it really helps me out

This is the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>
<link href="Extendet Dropdown.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">
<div id="menu">
<ul class="menu-item">
<li><a href="Try 2.html">Link to try 2</a>
</li>
<li><a href="Try 2.html">First Dropdown</a>
<ul>
<li><a href="Try 2.html">Link to try 2</a>
</li>
<li><a href="Try 2.html">Link to try 2</a>
</li>
<li><a href="Try 2.html">Link to try 2</a>
</li>
</ul>
</li>
<li>Back in time
</li>
<li>NO LINK
</li>
</ul>
</div>
</div>
</body>
</html>


This is the CSS (don't mind the german comments)


.container {
max-width: 1920;
min-width: 1280;
max-height: 1920;
min-height: 1080;
background-color: black;
padding: 20px:
}

#menu {
width: 850px;
height: 1080px;
border:none; /* border = rand */
background-color: yellow;
margin: auto; /*zentriert das Hauptkästchen ==> hier Websiten Hintergrund*/
}

ul.menu-item a {
display:block;
color: black;
font-family: Verdana;
font-size: 14px;
text-decoration: none;
}

ul.menu-item {
list-style: none;
margin: 0;
padding: 0;
color: #fff;
display:block;
color: black;
font-family: Verdana;
font-size: 14px;
text-decoration: none;
}

/*ul.menu-item { position: relative; z-index: 597; float: left; } keine sichtbare Funktion*/

ul.menu-item li {
float: left;
line-height: 24px;
vertical-align: middle; zoom: 1;
width: 200px;
height: 24px;
margin: 7px 0px 0px 7px;
text-align: center;
background-color: white;
color: black;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
border-radius:5px;
}

ul.menu-item li:hover { /*hover funktion für die boxen ganz oben*/
position: relative;
z-index: 599;
cursor: default;
color: #FF6C00;
-webkit-transition: color 0.5s ease;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}

ul.menu-item ul { /*einstellung für das dropdown kästchen*/
visibility: hidden;
position: relative;
top: 100%;
left: 0;
z-index: -1;
margin: -31px 0px 0px 0px;
background-color: white;
border: none;
list-style: none;
border-bottom-left-radius:5px;
border-bottom-right-radius: 5px;
-webkit-transition: all 1s ease-in-out;
}

ul.menu-item ul li { /*einstellung für die Liste des Dropddownkästchens */
float: none;
background: white;
text-align: center;
line-height: 24px;
width: 200px;
height: 24px;
margin: 7px 0px 0px -40px;
border-radius: 5px;
}


ul.menu-item ul li:hover{ /* notwendig, da sonst die unter Kante der Dropdown liste beim hover auch abflacht */
border-radius: 5px;
}

ul.menu-item li:hover > ul {
transform: visibility: visible;
}

ul.menu-item a:hover {
color: #FF6C00; /* color */
text-decoration: none; /* eliminates underline */
-webkit-transition: color 0.5s ease;
}