div容器添加纵向滚动条后无法显示定位的二级子菜单

Question

问题描述： 一个最外层的容器div，里面包含若干菜单列表div,当鼠标滑过菜单显示下属包含的二级菜单，二级菜单是通过绝对定位控制显示位置，当给整个div容器加了纵向滚动条后，二级菜单被遮挡无法显示。

功能样式展示：

出现的问题图例展示：

尝试过的解决方法：尝试过给二级菜单设置层级远高于整体的div容器，没有效果；

需求描述：在不改变原有需求的前提下，给整体div容器添加纵向滚动条，且滑过菜单时能够显示下属的二级菜单。

Answer 1

你的问题可能是由于你的二级菜单是在具有滚动条的div容器中绝对定位的。由于滚动条的存在，你的二级菜单实际上是被限制在了这个容器的边界内，而无法超出这个边界显示。要解决这个问题，你需要将二级菜单放在滚动条所在的div的外部。

你可以尝试以下的解决方案：

1. 对父级div设置 position: relative;，这样子元素的 position: absolute; 会相对于这个父元素定位。

2. 将二级菜单放置在一个更高层级的容器中，而非在具有滚动条的div内部。这样你可以使二级菜单相对于更高层级的容器进行定位，这就需要改动你的HTML结构，使二级菜单不再是滚动条div的子元素，而是其同级元素或者它的兄弟元素。

   示例如下：

   <div class="container">
       <div class="menu">菜单</div>
       <div class="submenu">二级菜单</div>
   </div>
   

3. 二级菜单可以使用JavaScript动态插入到DOM中，这样你可以直接插入到body中，然后再通过JavaScript动态计算并设置其位置。

以上只是一些基本的解决思路，具体的实现可能需要根据你的页面结构和需求进行调整。