html - 并行下拉多级菜单

Question

我正在尝试与子列表并行创建一个下拉多级菜单，如图所示:

子列表必须平行而不是对 Angular 线，这在多级菜单中很常见:
.
如果我使用独立的 div 而不是子列表，我看不到如何告诉子类别 div 选择了哪个父类别元素。
我的尝试:https://codepen.io/Agrimensor/pen/vYgGJwr

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 10px;
}

.dropdown {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100px;
  background-color: #0abf53;
}

.dropdown li {
  position: relative;
}

.dropdown li a {
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  display: block;
  padding: 10px;
}

.dropdown li ul {
  position: absolute;
  top: 0;
  left: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
  line-height: normal;
  background-color: #333;
}

.dropdown li ul li a {
  text-align: left;
  color: #cccccc;
  font-size: 14px;
  padding: 10px;
  display: block;
  white-space: nowrap;
}

.dropdown li ul li a:hover {
  background-color: #0abf53;
  color: #ffffff;
}

.dropdown li ul li ul {
  left: 100%;
  top: 0;
}

ul li:hover > a {
  background-color: #0abf53;
  color: #ffffff !important;
}

ul li:hover > ul {
  display: block;
}

<ul class="dropdown">
  <li><a href="#">Menu</a>
    <ul>
      <li><a href="">Nice Dropdown Menu</a></li>
      <li><a href="">Submenu - 1</a></li>
      <li><a href="#">Dropdown</a>
        <ul>
          <li><a href="">Submenu - 1</a></li>
          <li><a href="">Submenu - 2</a></li>
          <li><a href="#">Dropdown</a>
            <ul>
              <li><a href="">Submenu - 1</a></li>
              <li><a href="">Submenu - 2</a></li>
              <li><a href="">Submenu - 3</a></li>
            </ul>
          </li>
          <li><a href="">Submenu - 3</a></li>
        </ul>
      </li>
      <li><a href="">Submenu - 2</a></li>
    </ul>
  </li>
</ul>

Answer 1

删除规则 top: 0和 left: 100%在 .dropdown li ul ，并删除 position: relative来自 .dropdown li .

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

body {
    font-family: sans-serif;
    margin: 0;
    padding: 10px;
}

.dropdown {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100px;
    background-color: #0abf53;
}

.dropdown li {
    /* position: relative;*/
}

.dropdown li a {
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    display: block;
    padding: 10px;
}

.dropdown li ul {
    position: absolute;
    /*top: 0;
    left: 100%;*/
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
    line-height: normal;
    background-color: #333;
}

.dropdown li ul li a {
    text-align: left;
    color: #cccccc;
    font-size: 14px;
    padding: 10px;
    display: block;
    white-space: nowrap;
}

.dropdown li ul li a:hover {
    background-color: #0abf53;
    color: #ffffff;
}

.dropdown li ul li ul {
    left: 100%;
    top: 0;
}

ul li:hover > a {
    background-color: #0abf53;
    color: #ffffff !important;
}

.dropdown:hover * {
    display: block;
}

.dropdown > li > ul:hover ul {
    display: none;
}

li:hover > a.drop + ul {
    display: block!important;
}

<ul class="dropdown">
    <li>
        <a href="#">Menu</a>
        <ul>
            <li><a href="">Nice Dropdown Menu</a></li>
            <li><a href="">Submenu - 1</a></li>
            <li>
                <a class="drop" href="#">Dropdown</a>
                <ul>
                    <li><a href="">Submenu - 1</a></li>
                    <li><a href="">Submenu - 2</a></li>
                    <li>
                        <a class="drop" href="#">Dropdown</a>
                        <ul>
                            <li><a href="">Submenu - 1</a></li>
                            <li><a href="">Submenu - 2</a></li>
                            <li><a href="">Submenu - 3</a></li>
                        </ul>
                    </li>
                    <li><a href="">Submenu - 3</a></li>
                </ul>
            </li>
            <li><a href="">Submenu - 2</a></li>
        </ul>
    </li>
</ul>