How can I make an animation with the SubMenu of "appearing" and when it disappears make a "disappearing" effect using CSS?
* {
margin: 0;
padding: 0;
}
.menu {
width: 100%;
height: 50px;
background-color: #1a1a1a;
font-family: Roboto;
box-shadow: 0px 0px 100px 5px;
}
.menu ul {
text-align: center;
list-style: none;
position: relative;
padding: 0;
}
.menu ul li ul {
width: 100%;
}
.menu ul li {
display: inline-block;
width: 150px;
padding: 0px 10px;
line-height: 25px;
padding: 0;
position: relative;
}
.menu ul li a {
text-align: center;
font-size: 18px;
}
.menu a {
padding: 12.5px;
display: block;
text-decoration: none;
color: #666666;
}
.menu ul ul {
background-color: black;
position: absolute;
visibility: hidden;
}
.menu ul ul li {
float: none;
border-bottom: solid 1px #262626;
}
.menu ul li:hover ul {
visibility: visible;
}
.menu ul ul a:hover {
transition: all 0.4s ease;
background-color: #262626;
color: white;
}
.menu a:hover {
transition: all 0.4s ease;
color: white;
}
.menu ul ul li {
background-color: #1a1a1a;
}
.menu ul ul a {
font-size: 17px;
}
.menu ul ul li a:hover ul ul ul {
visibility: visible;
}
<body>
<nav class="menu">
<ul>
<li><a href="#">Página Inicial</a></li>
<li><a href="#">Página 2</a>
<ul>
<li><a href="#">SubMenu1</a></li>
</ul>
</li>
<li><a href="#">Página 3</a>
<ul>
<li><a href="#">SubMenu1</a></li>
<li><a href="#">SubMenu2</a></li>
</ul>
</li>
</ul>
</nav>
</body>