css导航栏弹出动画 |动态生成的元素无法设置css样式

.nav {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
}
.nav-toggle {
position: absolute;
top: 0;
right: 0;
z-index: 2;
padding: 1rem;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
display: block;
background-color: #333;
height: 3px;
width: 2.5rem;
border-radius: 3px;
position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
content: '';
position: absolute;
}
.nav-toggle span::before {
top: -9px;
}
.nav-toggle span::after {
top: 9px;
}
.nav-nav {
position: absolute;
top: 100%;
right: 0;
background-color: #333;
list-style: none;
margin: 0;
padding: 0;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: all 250ms ease-in-out;
transform: translateY(-10px);
border-radius: 0 0 5px 5px;
}
.nav:hover .nav-nav {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-nav li {
margin: 5px 0;
text-align: center;
}
.nav-nav a {
text-decoration: none;
color: #fff;
font-size: 1.2rem;
display: block;
padding: 0.5rem 1rem;
}

以上代码实现了一个弹出式的导航栏，当鼠标悬浮在导航栏上时，导航菜单会由上而下的弹出动画。其中，使用了CSS3过渡属性和transform属性来控制导航菜单的动画效果。