子菜单未完全并排定位

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

JSFiddle https://jsfiddle.net/b92txask/1/当您将鼠标悬停在图库上时会弹出子菜单

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

据我了解，快速浏览一下是sub.menus 是奇数。他们目前的风格position: absolute，这将使它们全部对齐在同一个位置。正如你所看到的，你正在这里这样做：

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

因此，修复很可能会使用position: relative，然后从那里对齐它们。此外，在使用子菜单时，每个元素上有一个 ID 有助于正确对齐（特别是在垂直和水平对齐它们时）。