Html 如何使用CSS在dropmenu上放置动画？

/*.dropdownMenuLista{
-webkit过渡：最大高度0.5s，不透明度0.2s 0.1s，可见性0s 4s；
-moz过渡：最大高度0.5s，不透明度0.2s 0.1s，能见度0s4s；
-ms转换：最大高度0.5s，不透明度0.2s 0.1s，能见度0s 4s；
-o型过渡：最大高度0.5s，不透明度0.2s 0.1s，能见度0s 4s；
过渡：最大高度0.5s，不透明度0.2s 0.1s，能见度0s 4s；
最大高度：0；
显示：块；
填充：0；
溢出：隐藏；
不透明度：0；
可见性：隐藏；
}
.下拉菜单{
-webkit过渡：最大高度0.6s，不透明度0.2s，可见性0s；
-moz过渡：最大高度0.6s，不透明度0.2s，可见性0s；
-ms转换：最大高度0.6s，不透明度0.2s，能见度0s；
-o型过渡：最大高度0.6s，不透明度0.2s，能见度0s；
过渡：最大高度0.6s，不透明度0.2s，可见性0s；
最大高度：290像素；
不透明度：1；
能见度：可见；
填充：0；
}*/
ul.ulDropMenu{
浮动：左；
}
ul.uldropli{
浮动：左；
列表样式：无；
位置：相对位置；
}
ul.uldropli a{
显示：块；
填充：9px 14px；
}
ul.uldropli-ul{
显示：无；
位置：绝对位置；
背景色：#fff；
边界半径：4px；
填充：8px；
}
ul.uldropli菜单：悬停ul{
显示：块；
}
ul.uldropli ul li{
宽度：120px；
}
ul.ulDropMenu li ul li a{
填充：6px 14px；
颜色：#2A2A2A；
}

你好，世界！

整个事情可以清理很多，但这样做并不能向您解释什么是错误的，所以我只会更改必要的内容

这里的核心问题是，您无法从

display:none

的

max height

设置动画到

display:block

，因为对于非块项目没有

max height

因此，我们需要删除

ul.ulDropMenu li的
显示的切换：悬停ul
（
.dropdownmenululista
）元素并以其他方式显示/隐藏。由于它隐藏在.dropdownMenuLista类中，通过
最大高度
、
不透明度
和
可见性
道具，我们需要启用悬停状态

此外，您的可见性动画为4秒，但其他动画小于1秒。因此，可能可见的动画将在4秒后元素实际可见之前运行

所有更改都用注释标记在代码段中


.dropdownMenuLista{
-webkit过渡：最大高度1s，不透明度0.2s 0.1s；
-moz过渡：最大高度1s，不透明度0.2s 0.1s；
-ms转换：最大高度1s，不透明度0.2s 0.1s；
-o型过渡：最大高度1s，不透明度0.2s 0.1s；
过渡：最大高度1s，不透明度0.2s 0.1s；
/*移除可见性动画*/
最大高度：0；
显示：块；
填充：0；
溢出：隐藏；
不透明度：0；
可见性：隐藏；
}
.下拉菜单{
-webkit过渡：最大高度0.6s，不透明度0.2s，可见性0s；
-moz过渡：最大高度0.6s，不透明度0.2s，可见性0s；
-ms转换：最大高度0.6s，不透明度0.2s，能见度0s；
-o型过渡：最大高度0.6s，不透明度0.2s，能见度0s；
过渡：最大高度0.6s，不透明度0.2s，可见性0s；
最大高度：290像素；
不透明度：1；
能见度：可见；
填充：0；
}
ul.ulDropMenu{
浮动：左；
}
ul.uldropli{
浮动：左；
列表样式：无；
位置：相对位置；
}
ul.uldropli a{
显示：块；
填充：9px 14px；
}
ul.uldropli-ul{
/*显示：无；-无法设置动画*/
位置：绝对位置；
背景色：#fff；
边界半径：4px；
填充：8px；
}
ul.uldropli菜单：悬停ul{
/*显示：块；-无法设置动画*/
/*通过启用所有道具来显示
在.dropdownMenuLista中隐藏此元素
风格*/
最大高度：290像素；
能见度：可见；
不透明度：1；
}
ul.uldropli ul li{
宽度：120px；
}
ul.ulDropMenu li ul li a{
填充：6px 14px；
颜色：#2A2A2A；
}

你好，世界！







何时触发转换？没有用于更改参数的悬停或js代码properties@TemaniAfif对不起，我不明白你的问题。我知道没有JS，我没有使用JS，只是
CSS
和
HTML
，下拉菜单工作正常，但没有
转换
类
。为了进行转换，您需要在执行此操作时更改值吗？怎么不起作用了？你期望它如何工作？@Temaniaf如果我不知道，我不会在
transition
上做很多工作。我想要像这样的东西：我已经有了代码，正如你在截图上看到的。但是它不起作用，你怎么想？如果你检查上面的代码，你会发现我们有一个
：hover
效果，可以更改属性，并且有一个过渡允许平滑的更改。。。所以，仅仅添加转换并不意味着它什么也做不了，你需要使用鼠标悬停或其他方式触发一些CSS更改。明白了！非常感谢。