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

Question

我需要使用水平缩放的ul>li>ul的组合创建一个菜单。每个 ul 都应该有一个最大高度，如果溢出，可以滚动。将鼠标悬停在 li 上时，如果里面有另一个 ul 标签，它应该在右侧打开另一个菜单。

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

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

问题：我不能将第三级定位为绝对的，它包含在第二级之下。另外，我不能溢出第二级，所以我可以为 2 级和 3 级提供 3 个卷轴。感谢您的任何帮助。

.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的解决方案。

我将显示 none 更改为不透明度 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>

Answer 2

如果你想做类似的事情，试试吧。

$(function() {
  $('li.parent').on('mouseover', function() {
    var menuItem = $(this);
    var submenuItem = $('.menu', menuItem);
    
    var menuItemPos = menuItem.position();
    
    submenuItem.css({
      top: 0,
      left: menuItemPos.left + Math.round(menuItem.outerWidth())
    });
  });
});

.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;
  display: none;
  background-color:lightgrey;
}
li:hover > .menu {
  display: block;
}
li.parent {
  cursor: pointer;
}

<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">
        <ul>
          <li class="parent">Link31...
            <div class="menu">
              <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>