javascript - 从父级溢出 :scroll 中弹出子级

Question

我正在为这个问题苦苦挣扎。我有一个垂直菜单列表，它位于一个 div 中，溢出设置为“滚动”(我也尝试过自动)。如果我将鼠标悬停在菜单中带有(溢出设置为滚动)设置的元素上，则不会显示菜单值。这是图像，它是如何显示的。

这里是针对上述情况的代码。 Not Working

这是导致很多麻烦的代码的 css 部分:

            .sidebar{
                  position: absolute;
                  top: 0px;
                  right:0px;
                  text-align: center;
                  font-family: 'Roboto','sans-serif';
                  line-height: 30px;
                  padding-left: 10px;
                  z-index: 10;
                  float:right;
                  margin-right:20px;
                  height: 100px;
                  //overflow:scroll; //This is the code to be changed
            }

            .sidebar ul{
                z-index:25;
            }

            .insideul{
                overflow: scroll;
            }

            #mainist li{
                z-index:50;
            }

这是工作图像。

如果我删除溢出，这里是工作代码。 working

谁能帮我解决上面的错误。谢谢。

Answer 1

我只是注释掉了 .sideBar 类中的 overflow-x: auto 和 overflow-flow: auto，它起作用了。

https://jsfiddle.net/3z8mq4k3/1/

 .sidebar{
              position: absolute;
              top: 0px;
              right:0px;
              text-align: center;
              font-family: 'Roboto','sans-serif';
              line-height: 30px;
              padding-left: 10px;
              z-index: 10;
              float:right;
              margin-right:20px;
              height: 700px;
              /*overflow-x: auto;
              overflow-y: auto;*/
        }