html - 水平子菜单对齐的垂直下拉菜单

Question

我目前正在尝试制作一个带有水平子菜单的垂直下拉菜单。

但我无法让子菜单与父菜单对齐。

目前菜单是这样的:

x

x

x

x>

x - x

但我希望它像这样工作:

x

x

x

x> - x

x

我的代码在 jsfiddle 中:

https://jsfiddle.net/919qb7u5/

我尝试了各种修复，包括绝对和相对位置、顶部和底部间距。

.dropdown-content ul {
  bottom: 0;
  left: 100%;
}

Answer 1

只需将 position:relative 赋给 .dropdown-content li

.dropdown-content li {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  position:relative;
}

Working Fiddle