html - 子菜单没有完全并排定位

Question

我发现 .sub_menu 代码 left:-; 和 transform:translateX(-%); 有问题，所以我改变了位置相对并用上面的两个代码重新定位，它似乎工作但现在我拥有的两个子菜单不再并排。他们所做的是顶部相隔几厘米:，不确定是什么导致了这种情况，任何帮助将不胜感激，谢谢

JSFiddle将鼠标悬停在图库上时会弹出子菜单

.sub_menu {
  display: none;
  position:relative;
  top:-60%;
  left:-350%;
  transform:translateX(-40%);
  width: auto;
}

.sub_menu > li {
  display:inline-block;
}

.sub_menu li a {
  background:-webkit-linear-gradient(#77047e,#FF00FF);
  background:-o-linear-gradient(#77047e,#FF00FF);
  background:-moz-linear-gradient(#77047e,#FF00FF);
  background:linear-gradient(#77047e,#FF00FF);
}

.sub_menu li a:hover {
  background:#FF00FF;
  top:1em;
}

Answer 1

根据我的理解，快速浏览一下是 sub.menu 很奇怪。它们目前具有 position: absolute 样式，这将使它们全部对齐在相同的位置。如您所见，您正在此处执行此操作:

.sub_menu {
  display:none;
  position:absolute;
  top:-37%;
  left:-47%;
  transform:translateX(-20%);
  width:auto;
  white-space:nowrap;
}

因此，最有可能的修复方法是使用 position: relative，然后从那里对齐它们。此外，在使用子菜单时，每个元素都有一个 ID 有助于正确对齐(尤其是在垂直和水平对齐时)。