添加标准animation-duration后CSS子菜单仍不可见的技术求助

• 先确认动画关键帧是否定义
  你只给元素指定了动画名称和时长，但如果没定义showSubMenu这个动画，所有设置都不会生效。必须补上对应的关键帧代码，同时兼顾webkit前缀：

  @-webkit-keyframes showSubMenu {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  @keyframes showSubMenu {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  

  另外要注意：display: block是瞬间生效的属性，无法和动画配合——浏览器会直接跳过动画阶段，这很可能是子菜单看不见的核心原因。

• 替换display为可动画的属性
  别用display控制显示/隐藏，改用opacity和visibility，同时默认把display设为block避免布局跳动：

  /* 子菜单默认样式 */
  .navbar-menu .menu li > .submenu,
  .navbar-mini-menu .mini-menu-options li > .submenu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease; /* 用过渡比动画更简单，也可以继续用动画 */
  }
  
  /* hover触发样式 */
  .navbar-menu .menu li:hover > .submenu {
    opacity: 1;
    visibility: visible;
    -webkit-animation-name: showSubMenu;
    animation-name: showSubMenu;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
  }
  

• 补全第二个选择器的兼容代码
  你只修改了.navbar-menu的规则，.navbar-mini-menu的代码还只有webkit前缀，统一补上标准属性：

  .navbar-mini-menu .mini-menu-options li:focus > .submenu {
    display: block;
    -webkit-animation-name: showSubMenu;
    animation-name: showSubMenu;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
  }
  

• 检查样式优先级与元素状态
  用Chrome开发者工具（F12）选中子菜单元素，查看computed样式：

  • 确认display不是none
  • 检查是否有其他高优先级样式（比如内联样式、ID选择器）覆盖了你的规则
  • 确认opacity和visibility在hover/focus时正确切换为1和visible

内容的提问来源于stack exchange，提问作者Ahmed