子菜单不与侧父元素重叠

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的嵌套视图层次结构所致。

您需要一个不溢出的父元素，用作子菜单的定位锚。我试图将您的示例简化为必要的部分：

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

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