Css 如何将边距顶部添加到响应的多级菜单，而不影响导航动画？

演示

点击汉堡菜单图标后，菜单显示

这是菜单的原始CSS：

.dl-menuwrapper .dl-menu {
  backface-visibility: hidden;
  margin: 5px 0 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(10px);
  width: 100%;
}

期望的行为

我想将菜单从

页边距顶部：5px

向下移动到

页边距顶部：34px

，即：

margin:34px05px0px

实际行为

但是，当我在Firebug中更改此属性时，在导航到子菜单时发生的动画期间，菜单会向上凸起到其原始位置，然后在动画完成时向下凸起

我希望菜单在动画期间保持其垂直位置

我一直在关注firebug中CSS的变化，但我仍然不知道如何启用它

菜单似乎从以下位置设置动画：

子菜单关闭状态


子菜单打开状态


在这两种状态之间，应用了另一类：


或：


我尝试的

所有这些状态中的公共类都是
dl menuopen
，因此我尝试：

.dl-menuopen {
  margin-top: 34px !important;
}

但在动画中仍然得到了“颠簸”效果

然后我试着加上：

.dl-animate-in-2, .dl-animate-out-2 {
  margin-top: 34px !important;
}

但菜单还是有点上扬

我还尝试：

.dl-animate-in-2, .dl-animate-out-2, .dl-menu {
  margin-top: 34px !important;
}

但是动画仍然很紧张

如何在整个动画中保持
页边距顶部：34px
 这似乎有效：

是：

改为：

.dl-menuwrapper .dl-menu {
  backface-visibility: hidden;
  margin: 0px !important; /* change here */
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(10px);
  width: 100%;
}

.dl-menuwrapper > .dl-submenu {
  left: 0;
  margin: 0;
  position: absolute;
  /*top: 50px;*/ /* change here */
  width: 100%;
}

是：

改为：

.dl-menuwrapper .dl-menu {
  backface-visibility: hidden;
  margin: 0px !important; /* change here */
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(10px);
  width: 100%;
}

.dl-menuwrapper > .dl-submenu {
  left: 0;
  margin: 0;
  position: absolute;
  /*top: 50px;*/ /* change here */
  width: 100%;
}

并将
页边距底部：34px
添加到
.dl menuwrapper按钮
 这似乎有效：

是：

改为：

.dl-menuwrapper .dl-menu {
  backface-visibility: hidden;
  margin: 0px !important; /* change here */
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(10px);
  width: 100%;
}

.dl-menuwrapper > .dl-submenu {
  left: 0;
  margin: 0;
  position: absolute;
  /*top: 50px;*/ /* change here */
  width: 100%;
}

是：

改为：

.dl-menuwrapper .dl-menu {
  backface-visibility: hidden;
  margin: 0px !important; /* change here */
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(10px);
  width: 100%;
}

.dl-menuwrapper > .dl-submenu {
  left: 0;
  margin: 0;
  position: absolute;
  /*top: 50px;*/ /* change here */
  width: 100%;
}

并将
页边距底部：34px
添加到
.dl menuwrapper按钮
 这是你想要的吗<代码>页边空白顶部：34px

将在子菜单导航期间维护。我无法访问整个样式，但您可以尝试此操作，不要使用边距，而是尝试增加

top

值。我尝试了code

.dl menuwrapper>.dl子菜单{位置：绝对；宽度：100%；顶部：70px；左侧：0；边距：0}

，但它似乎没有任何作用。这是您想要的吗<代码>页边空白顶部：34px将在子菜单导航期间维护。我无法访问整个样式，但您可以尝试此操作，不要使用边距，而是尝试增加

top

值。我尝试了code

.dl menuwrapper>.dl子菜单{位置：绝对；宽度：100%；顶部：70px；左侧：0；边距：0}

，但它似乎没有任何作用。