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

Answer 2

也许你应该对子菜单使用绝对位置：

let input = [{"Positive":"14.71","Neutral":"50.0","Negative":"35.29"}];

function* pairs(o) {
  for (let k of Object.keys(o))
    yield [k, o[k]];
}

let output = [];
for (let [type, value] of pairs(input[0]))
  output.push({type, value: Number(value)});

console.log(output);

Answer 3

好吧，如果你隐藏了overflow-x，预计它不会显示... Duh

也许在.submenu { position : absolute; top : 100px; /*position from top*/ left : 100px; /*position from left*/ }上试试overflow-x: visible？

overflow-x hidden不会让我内心的内容消失

3 个答案: