html--------------------------
<div class="dropdown">
??????<span>鼠标移动到我这！</span>
?????? <div class="dropdown-content">
???????? <p>home</p>
???????? <p>home1</p>
?????? </div>
???</div>
css---------------------------
.dropdown {
?position: relative;
?display: inline-block;
}
.dropdown-content {
?display: none;
?position: absolute;
?background-color: #f9f9f9;
?min-width: 160px;
?box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
?padding: 12px 16px;
?animation:myfirst 5s;
?-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
.dropdown:hover , .dropdown-content {
?display: block;
?animation:myfirst 1s;
}
@keyframes myfirst
{
???from {background: red;}
???to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
???from {background: red;}
???to {background: yellow;}
}
css hover dropdown
原文地址：https://www.cnblogs.com/JamyWong/p/9911281.html