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可以正确对齐（特别是在垂直和水平对齐时）。

子菜单并不是完全并排放置的

1 个答案: