Html 如何溢出3级深度菜单ul>；李>；ul>；李>；ul>；锂

我需要创建一个菜单，使用ul>li>ul的组合水平缩放。每个ul应有一个最大高度，并在溢出时滚动。当鼠标悬停在li上时，如果其内部有另一个ul标签，则应在右侧打开另一个菜单

换句话说，每个后续菜单都应该是独立的，如果有必要，可以有自己的滚动条，如果有另一个菜单，可以显示/隐藏（这一部分由js代码提供）

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

问题：我不能将第三级放在绝对位置，它在第二级下面。此外，我不能溢出第二级，所以我可以有2级和第三级卷轴。 谢谢你的帮助

HTML:

ul.l1--菜单，
ul.l2--菜单，
ul.l3--菜单{
位置：相对位置；
显示：块；
填充：0；
浮动：左；
z指数：1；
宽度：100px；
边框：1px纯黑；
高度：100px；
}
.菜单{
位置：绝对位置；
}
李{
列表样式：无；
显示：块；
}
李：悬停{
背景：红色；
}
ul.l1--菜单{
宽度：300px；
z指数：1；
}
ul.l2--菜单{
保证金：0；
左：100px；
宽度：200px；
z指数：2；
位置：绝对位置；
排名：0；
最大高度：100px；
溢出y：滚动；
溢出x：隐藏；
}
ul.l3--菜单{
保证金：0；
左：100px；
宽度：100px；
z指数：3；
位置：绝对位置；
排名：0；
}

如果您想做类似的事情，请尝试一下

$（函数（）{
$（'li.parent'）。在（'mouseover'，function（）上{
var menuItem=$（此项）；
变量子菜单项=$（'.menu'，菜单项）；
var menuItemPos=menuItem.position（）；
子菜单项.css({
排名：0，
左：menuItemPos.left+Math.round（menuItem.outerWidth（））
});
});
});
菜单{
位置：相对位置；
}
保险商实验室{
宽度：200px；
保证金：0；
颜色：黑色；
列表样式：无；
填充：0；
最大高度：100px；
溢出x：隐藏；
溢出y：自动；
}
李{
填充：0.5em；
}
李：悬停{
背景颜色：蓝色；
颜色：白色；
}
李：菜单{
位置：绝对位置；
z指数：10；
显示：无；
背景颜色：浅灰色；
}
li：悬停>。菜单{
显示：块；
}
李：父母{
光标：指针；
}


链接1
链接3。。。

链接31。。。

链接311
链接312
链接313
链接314


链接32
链接33
链接34


链接2
链接1
链接2

如果您想做类似的事情，请尝试一下


$（函数（）{
$（'li.parent'）。在（'mouseover'，function（）上{
var menuItem=$（此项）；
变量子菜单项=$（'.menu'，菜单项）；
var menuItemPos=menuItem.position（）；
子菜单项.css({
排名：0，
左：menuItemPos.left+Math.round（menuItem.outerWidth（））
});
});
});
菜单{
位置：相对位置；
}
保险商实验室{
宽度：200px；
保证金：0；
颜色：黑色；
列表样式：无；
填充：0；
最大高度：100px；
溢出x：隐藏；
溢出y：自动；
}
李{
填充：0.5em；
}
李：悬停{
背景颜色：蓝色；
颜色：白色；
}
李：菜单{
位置：绝对位置；
z指数：10；
显示：无；
背景颜色：浅灰色；
}
li：悬停>。菜单{
显示：块；
}
李：父母{
光标：指针；
}


链接1
链接3。。。

链接31。。。

链接311
链接312
链接313
链接314


链接32
链接33
链接34


链接2
链接1
链接2

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

我将display none更改为opacity 0，以获得淡入淡出的可能性，并且在从父级转到子级时更方便地保持状态


菜单{
位置：相对位置；
}
保险商实验室{
宽度：200px；
保证金：0；
颜色：黑色；
列表样式：无；
填充：0；
最大高度：100px；
溢出x：隐藏；
溢出y：自动；
}
李{
填充：0.5em；
}
李：悬停{
背景颜色：蓝色；
颜色：白色；
}
李：菜单{
位置：绝对位置；
z指数：10；
背景颜色：浅灰色；
不透明度：0；
过渡：不透明度0.5s；
}
李：鼠标悬停>。菜单，
.菜单：悬停{
不透明度：1；
}
李：父母{
光标：指针；
}
.2级{
顶部：0px；
左：200px；
}


链接1
链接3。。。

链接31。。。

链接311
链接312
链接313
链接314


链接32
链接33