Question

我需要使用ul＆gt;的组合创建一个菜单li> ul水平缩放。每个ul应该有一个max-height，如果溢出则滚动。将鼠标悬停在li上时，如果内部有另一个ul标签，则应在右侧打开另一个菜单。

换句话说，每个后续菜单应该是独立的，如果需要的话可以拥有它自己的滚动条，如果有另一个菜单则显示/隐藏（这部分可以从js代码开始）

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

问题：我不能将第3级定位为绝对级别，它包含在第2级之下。另外，我不能溢出第二级，所以我可以为level2和level3有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>

Answer 2

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

＆＃13;

$(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())
    });
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何溢出3级深度菜单ul＆gt; li> ul＆gt; li> ul＆gt;里

2 个答案: