html - overflow-x hidden 不让我里面的内容出去

Question

我正在使用 Bootstrap 处理下拉菜单，我有一个名为“side-menu”的 div 元素溢出-y:滚动；宽度:60px，

在它里面我有下拉菜单，如你所知，下拉菜单有 UL 标签，其中包含你想要弹出的内容，

好吧，即使我滚动侧边菜单，我也想在与下拉菜单相同的位置弹出侧边菜单之外的内容。

但似乎我的“侧面菜单”有一个 overflow-x，即使我设置了 overflow-x:hidden，它也不会让我的内容消失

知道怎么做吗？

html:

<div class="side-menu">
         <ul class="main-navigation-menu">
                 <li class="dropdown">
                       <button class="item dropdown-toggle" type="button" id="dropdownChamados" data-toggle="dropdown" >

                       <div class="item-content">
                         <div class="item-media"><i class="ti-bar-chart"></i></div>
                         <div class="item-inner"> <span class="name"> Orçamentos</span> <i class="icon-arrow"></i></div>
                       <div>

                      </button>
                      <ul class="dropdown-menu dropdown-item sub-menu" aria-labelledby="dropdownChamados">
                        <li><a href="#">test</a></li>
                        <li><a href="#">test</a></li>
                        <li><a href="#">test</a></li>
                        <li><a href="#">test</a></li>
                      </ul>
                </li>
         </ul>
</div>

CSS:

    .side-menu{
        margin-top: 68px;
            position: fixed;
            float: left;
            width: 60px;
            padding: 0px !important;
            height: calc(100vh - 68px);
            border-right: 1px solid #c8c7cc;
            background-color: #FFF;
            overflow-y: scroll;
            overflow-x: hidden;
    }
 .main-navigation-menu  .dropdown .dropdown-menu {
        position: absolute;
        left: 60px;
        height: auto;
        bottom: auto;
        top: auto;
        width: 260px;
        border-radius: 0;
        border-bottom: 1px solid;
        border-right: 1px solid;
        border-color: #c8c7cc;
        margin-top: -1px;
        overflow-y: scroll;
        overflow-x: hidden;

    }

Answer 1

哦，好的，我现在明白了，为此使用 javascript，这是代码:
`

<button /* attributes here */ onclick="showmenu()"></button>
<script>
    var dropdown = document.querySelector(".dropdown-menu").style.display;
    function showmenu()
  {
    if(dropdown=="block"){dropdown="none";}
    else if(dropdown=="none"){dropdown="block";}
    }
</script>

这里是要修改的css:

.side-menu
 {
   overflow:visible;
}
.dropdown-menu
{
  display:none;
}