javascript - 子菜单不与侧面父元素重叠

Question

我已经为我的网站创建了客户侧边栏，一切都很好，但是当用户将鼠标悬停在菜单列表上时，我有菜单和子菜单，如果它有子菜单，那么它将显示没关系。问题是子菜单不与滚动条和侧面父/同级元素重叠。我在此处添加了图片以获得更多说明。

.menu {
    height: 100%;
    width:16.16% !important;
    position: fixed;
    z-index: 1000;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 10%;
    background-color: white;    
    border-right:2px solid #f1f1f1;
}

.menu ul {
    list-style-type: none;
    margin-left:-40px;
    margin: 0;
    padding: 0;
}

.menu ul > div{
    font-weight:bold;
    font-size:18px;
    margin-top: 10px;
    margin-bottom:0px;
    border-bottom:1px solid #f1f1f1;
    cursor: pointer;
}

.menu ul li {
    padding: 5px;
    position: relative;
    vertical-align: middle;
    height:auto;
    width: 100%;
    border-bottom:1px solid #f1f1f1;
    font-size: 16px;
    padding-left:10px;
}
.menu ul ul{
    min-height: 30px;
    transition: all 0.3s;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    left: 80%;
    top:100%;
    border: 1px solid #f1f1f1;
    z-index: -1000000;
}

.menu ul ul > li{
    width: 250px;
    height: auto;
    background-color: white;
    border-bottom: 1px solid black;
}

.menu > ul > li > div > i{
    float: right;
    vertical-align: middle;
    line-height: 1.5;
}
.menu ul li:hover{
    background-color:#cccccc;
    cursor:pointer;
    opacity: 1;
}
.menu ul li:hover > ul{
    opacity: 2;
    visibility: visible;
    z-index: 100000000;
    //left: 100%;
}

<!-----Header will come here ----->
<div class="container-fluid row">
    <div class="col-md-12 text-center" id="topHeader">
        <span>Circulation</span>
    </div>
<div class="col-md-2">
    <div class="menu"><i id="hideSideBar" class="fa fa-close"></i>
        <ul class="menuList"><div class="listName">Reports</div>
            <li class="path" data-screen="CustomizedCirculationReportsCt/index" id="li_CustomizedReport">Customized Report</li>
            <li class="path" data-screen="CustomizedCirculationStatisticsCt/index" id="li_CustomizedReport">Customized Statistics</li>
            <li class="hasChildUl" id=""><div class="listName">UserWise Report<i class="fa fa-caret-right"></i></div>
                <ul class="menuList">
                    <li class="path" data-screen="UserWiseCirculationController/AllUserCirculation" id="userWiseCrReport">Circulation Report</li>
                    <li class="path" data-screen="UserWiseCirculationController/userWiseFineCollection" id="userWiseFineCrReport">Fine Collection Report</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="col-md-10 firstChild">
    <div class="row">
        <p>Web pages goes here</p>
    </div>
</div>
<!-----Footer will come here ----->

图片:

Answer 1

更新的答案

我找到了一个 nice article on Popping out of hidden overflows这似乎解决了这个问题。

问题是由于 overflow 属性和来自 position: absolute/relative/fixed 的嵌套 View 层次结构的不明显行为所致。

您需要一个非溢出的父元素作为子菜单的定位 anchor 。我试图将您的示例简化为必要的部分:

.menu {
    position: fixed;
}

ul {
    list-style-type: none;
    height: 100px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px dashed #ccc;
}

.menu ul li {
    /*
      this seems to be the problematic property
      position: relative;
    */
}

.menu ul ul {
    transition: all 0.3s;
    opacity: 0;
    position: absolute;
    left: 80%;
    background: red;
}

.menu ul li:hover {
    background-color: #cccccc;
}

.menu ul li:hover > ul {
    opacity: 1;
    z-index: 10;
}

    <div class="menu">
        <ul>
            <li>Customized Report
            <ul>
                    <li>Circulation Report</li>
                    <li>Fine Collection Report</li>
                </ul></li>
            
            <li>Customized Statistics</li>
            <li>Customized Statistics</li>
            <li>Customized Statistics</li>
            <li>Customized Statistics</li>
            <li>Customized Statistics</li>
            <li>Customized Statistics</li>
            <li>Customized Statistics</li>
            <li>UserWise Report
                <ul>
                    <li>Circulation Report</li>
                    <li>Fine Collection Report</li>
                </ul>
            </li>
        </ul>
    </div>

但是子菜单的定位有问题，可以用 javascript 解决。查看文章以获得更好的解释。

就我个人而言，我总是尽量避免嵌套滚动。我建议您评估菜单增长时滚动整个页面的可能性。此外，我不会依赖 :hover 或 mouseover 显示的子菜单，因为它们在触摸控制的浏览器上不可用。

原始答案

在CSS中，菜单设置了它的horizontal overflow。隐藏。当您删除溢出属性时，将显示弹出菜单:

.menu {
    height: 100%;
    width:16.16% !important;
    position: fixed;
    z-index: 1000;
    left: 0;
    /* 
      Remove this props

      overflow-x: hidden;
      overflow-y: auto;
    */
    padding-bottom: 10%;
    background-color: white;    
    border-right:2px solid #f1f1f1;
}

当您从示例代码中删除这些行时，它会起作用。