html - 如何溢出 3 级深度菜单 ul > li > ul > li > ul > li

Question

我需要使用水平缩放的 ul > li > ul 的组合来创建一个菜单。每个 ul 都应该有一个 max-height 并在溢出时滚动。悬停在 li 上时，如果里面有另一个 ul 标签，它应该会在右侧打开另一个菜单。

换句话说，每个后续菜单应该是独立的，必要时有自己的滚动条，如果有另一个菜单则显示/隐藏(这部分来自 js 代码)

对于下面的这个例子，我忽略了悬停机制，但红色背景应该显示显示下一级菜单的流程。

问题:我无法将第 3 层定位为绝对的，它包含在第 2 层之下。另外，我不能溢出第 2 级，所以我可以为 2 级和 3 级有 2 个卷轴。谢谢你的帮助。

HTML:

ul.l1--menu,
ul.l2--menu,
ul.l3--menu  {
	position: relative;
	display: block;
	padding: 0;
	float: left;
	z-index: 1;
	width: 100px;
  border: 1px solid black;
  height: 100px;
}
.menu {
  position: absolute;
}
li {
	list-style: none;
	display: block;
}
li:hover {
  background: red;
}
ul.l1--menu {
	width: 300px;
	z-index: 1;
}
ul.l2--menu {
	margin : 0;
	left: 100px;
	width: 200px;
	z-index: 2;
	position: absolute;
	top: 0;
    max-height:100px;
    overflow-y: scroll;
    overflow-x: hidden;
}
ul.l3--menu {
	margin : 0;
	left: 100px;
	width: 100px;
	z-index: 3;
	position: absolute;
	top: 0;
}

<div class="menu">
  <ul class=" l1--menu">
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <a href="#">2</a>
      <ul class=" l2--menu">
        <li>
          <a href="#">a</a>
        </li>
        <li>
          <a href="#">b</a>
        </li>
        <li>
          <a href="#">c</a>
        </li>
        <li>
          <a href="#">d</a>
          <ul class=" l3--menu">
            <li>
              <a href="#">sub d</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">e</a>
          <ul class=" l3--menu">
            <li>
              <a href="#">sub e</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">e</a>
        </li>
        <li>
          <a href="#">f</a>
        </li>
        <li>
          <a href="#">g</a>
        </li>
        <li>
          <a href="#">h</a>
        </li>
       </ul>
     </li>
   </ul>
 </div>

Answer 1

这是一个使用纯 CSS 的解决方案。

我将 display none 更改为 opacity 0 以获得淡入淡出的可能性，并且在从父级到子级时保持状态更加用户友好

.menu {
  position: relative;
}

ul {
  width: 200px;
  margin: 0;
  color: black;
  list-style:none;
  padding:0;
  max-height:100px;
  overflow-x: hidden;
  overflow-y: auto;
}

li {
  padding:0.5em;
}
li:hover{
  background-color:blue;
  color:white;
}
li .menu {
  position: absolute;
  z-index: 10;
  background-color:lightgrey;
  opacity: 0;
  transition: opacity 0.5s;
}
li:hover > .menu,
.menu:hover {
  opacity: 1;
}

li.parent {
  cursor: pointer;
}

.level2 {
  top: 0px;
  left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li>Link1</li>
    <li class="parent">Link3...
      <div class="menu level2">
        <ul>
          <li class="parent">Link31...
            <div class="menu level2">
              <ul>
                <li>Link 311</li>
                <li>Link 312</li>
                <li>Link 313</li>
                <li>Link 314</li>
              </ul>
            </div>
          </li>
          <li>Link 32</li>
          <li>Link 33</li>
          <li>Link 34</li>
        </ul>
      </div>
    </li>
    <li>Link2</li>
    
    <li>Link1</li>
    <li>Link2</li>
    
  </ul>
</div>