无人认领空间-Wordpress中的下拉菜单CSS

Question

我有一个问题，获得WordPress模板下拉框的效果。我已经尝试了很多个小时，它是不变的。我对CSS的知识不是太多，所以我请你帮忙。

我添加到模板函数下拉菜单中，该菜单适用于孩子的主题。我想消除子菜单中项目不必要的间隙。例如，我对“test1”和“dropmenu”的效果很感兴趣

子代码：

.sub-menu { 
  visibility: hidden; /* hides sub-menu */
  opacity: 0;
  top: 100%;
  left: -20px;
  height: 0px;
  width: 100%;
  transform: translateY(-2em);
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.menu-item:hover .sub-menu {
  visibility: visible; /* shows sub-menu */
  opacity: 1;
  display: block;
  height: 64px;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */

}

.menu-item {
    position: relative;
    display: inline-block;
}

图片：解释

网站：此处链接

Answer 1

空间来自。子菜单。您有高度：0 打开。子菜单，这很好，但是li上的页边空白顶部溢出并创建了该空间。

添加溢出：隐藏 到。子菜单似乎解决了这个问题。