Question

我在获取Wordpress模板下拉菜单的效果时遇到问题。我已经尝试了很多个小时，但没有改变。我对CSS的了解不是很大，所以我请求你帮忙。

我添加了模板功能下拉菜单，该菜单适用于孩子的主题。我想摆脱子菜单中项目不必要的空白。例如，我对＆＃34;测试1＆＃34;的情况感兴趣。和＆＃34; dropmenu。＆＃34;

子代码：

.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;
}

图片：explanation

网站：here link

Answer 1

空间来自.sub-menu。 height: 0;上有.sub-menu，这很好，但li上的margin-top溢出并创建了该空间。

将overflow: hidden;添加到.sub-menu似乎可以解决问题。

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

1 个答案: