html - 如何将 `` 传递给另一个元素

Question

我想让我的应用程序响应，但我刚刚发现一个问题 <ul> ，当我缩小窗口时，他消失了，但我想让它越过其他元素(看图片)

没关系:

但这不行:

当我缩小窗口时他换边...

这就是 3 个选项的 HTML

<ul class="nav navbar-right panel_toolbox">
  <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
  </li>
  <li>
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
    <ul class="dropdown-menu" role="menu">
      <li><a id="allMch">All machines</a>
      </li>
      <li><a id="rngMch">Only running machines</a>
      </li>
      <li><a id="stpMch">Only stopped machines</a>
      </li>
    </ul>
  </li>
  <li><a class="close-link"><i class="fa fa-close"></i></a>
  </li>
</ul> 

以及下拉菜单的CSS:

.dropdown-menu {
  overflow: auto;
    border: medium none;
    box-shadow: none;
    display: none;
    // float: left;
    font-size: 12px;
    left: 0;
    list-style: none outside none;
    padding: 0;
    // position: absolute;
    text-shadow: none;
    top: 100%;
    z-index: 9998;
    border: 1px solid #D9DEE4;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.dropdown-menu>li>a {
    color: #5A738E;
}

Answer 1

如果@nashcheez 用他的代码给出答案，我会将其标记为答案，但我的解决方案是在 css 中添加此代码:

.panel_toolbox>li>ul {
    left:auto;
    right:0;
    position: absolute;
}