水平滚动中的语义-UI 下拉菜单 DIV

Question

我正在尝试将语义-UI 下拉菜单包含在具有许多列且具有水平滚动条的 table 中。

单击下拉菜单时，选项隐藏在 div 内。

fiddle: http://jsfiddle.net/rotemx/n0azk0jc/

代码：

<div id="wrapper">
  <div id="content">
    <div style="width: 500px">
      <div class="inline-block">
        <div class="ui selection dropdown">
          <input type="hidden" name="gender">
          <i class="dropdown icon"></i>
          <div class="default text">Gender</div>
          <div class="menu">
            <div class="item" data-value="1">Male</div>
            <div class="item" data-value="0">Female</div>
          </div>
        </div>
      </div>
      <div class="inline-block">
        <div class="ui selection dropdown">
          <input type="hidden" name="gender">
          <i class="dropdown icon"></i>
          <div class="default text">Gender</div>
          <div class="menu">
            <div class="item" data-value="1">Male</div>
            <div class="item" data-value="0">Female</div>
          </div>
        </div>
      </div>
      <div class="inline-block">
        <div class="ui selection dropdown">
          <input type="hidden" name="gender">
          <i class="dropdown icon"></i>
          <div class="default text">Gender</div>
          <div class="menu">
            <div class="item" data-value="1">Male</div>
            <div class="item" data-value="0">Female</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

截图：

问题： 如何使下拉菜单可见？

Answer 1

根据您当前的设置，您不能。 溢出的元素内的任何内容：none 不能显示在元素边界之外。