滚动垂直溢出，同时仍然允许水平溢出

Question

我试图隐藏垂直溢出，同时允许使用下拉菜单进行水平溢出，以便可以选择子类别。我试过使用overflow-y: scroll; 和overflow-x: visible，但这仍然会导致溢出到一边滚动。

如何滚动垂直溢出，并允许水平溢出？

JSFiddle：https://jsfiddle.net/utqz406p/8/

片段：

    $('.ui.dropdown')
      .dropdown({});

.ui.selection.dropdown.show .menu {
  overflow: visible !important;
}

<script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>

<div class="ui search selection dropdown show" id="test">
  <span class="text">Search Selection</span>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">
      <span class="text">Category 1</span>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 2</span>
      <div class="menu">
        <div class="item">Item 2A</div>
        <div class="item">Item 2B</div>
        <div class="item">Item 2C</div>
      </div>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 3</span>
      <div class="menu">
        <div class="item">Item 3A</div>
        <div class="item">Item 3B</div>
        <div class="item">Item 3C</div>
      </div>
    </div>
    <div class="item">
      <span class="text">Category 4</span>
    </div>
    <div class="item">
      <span class="text">Category 5</span>
    </div>
    <div class="item">
      <span class="text">Category 6</span>
    </div>
    <div class="item">
      <span class="text">Category 7</span>
    </div>
    <div class="item">
      <span class="text">Category 8</span>
    </div>
    <div class="item">
      <span class="text">Category 9</span>
    </div>
    <div class="item">
      <span class="text">Category 10</span>
    </div>

  </div>
</div>

<div class="ui selection dropdown show" id="test2">
  <span class="text">Selection Visible</span>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">
      <span class="text">Category 1</span>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 2</span>
      <div class="menu">
        <div class="item">Item 2A</div>
        <div class="item">Item 2B</div>
        <div class="item">Item 2C</div>
      </div>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 3</span>
      <div class="menu">
        <div class="item">Item 3A</div>
        <div class="item">Item 3B</div>
        <div class="item">Item 3C</div>
      </div>
    </div>
    <div class="item">
      <span class="text">Category 4</span>
    </div>
    <div class="item">
      <span class="text">Category 5</span>
    </div>
    <div class="item">
      <span class="text">Category 6</span>
    </div>
    <div class="item">
      <span class="text">Category 7</span>
    </div>
    <div class="item">
      <span class="text">Category 8</span>
    </div>
    <div class="item">
      <span class="text">Category 9</span>
    </div>
    <div class="item">
      <span class="text">Category 10</span>
    </div>
  </div>
</div>

<div class="ui selection dropdown" id="test4">
  <span class="text">Selection Hidden</span>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">
      <span class="text">Category 1</span>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 2</span>
      <div class="menu">
        <div class="item">Item 2A</div>
        <div class="item">Item 2B</div>
        <div class="item">Item 2C</div>
      </div>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 3</span>
      <div class="menu">
        <div class="item">Item 3A</div>
        <div class="item">Item 3B</div>
        <div class="item">Item 3C</div>
      </div>
    </div>
    <div class="item">
      <span class="text">Category 4</span>
    </div>
    <div class="item">
      <span class="text">Category 5</span>
    </div>
    <div class="item">
      <span class="text">Category 6</span>
    </div>
    <div class="item">
      <span class="text">Category 7</span>
    </div>
    <div class="item">
      <span class="text">Category 8</span>
    </div>
    <div class="item">
      <span class="text">Category 9</span>
    </div>
    <div class="item">
      <span class="text">Category 10</span>
    </div>
  </div>
</div>

<div class="ui dropdown" id="test3">
  <span class="text">Choose Category</span>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">
      <span class="text">Category 1</span>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 2</span>
      <div class="menu">
        <div class="item">Item 2A</div>
        <div class="item">Item 2B</div>
        <div class="item">Item 2C</div>
      </div>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 3</span>
      <div class="menu">
        <div class="item">Item 3A</div>
        <div class="item">Item 3B</div>
        <div class="item">Item 3C</div>
      </div>
    </div>
    <div class="item">
      <span class="text">Category 4</span>
    </div>
    <div class="item">
      <span class="text">Category 5</span>
    </div>
    <div class="item">
      <span class="text">Category 6</span>
    </div>
    <div class="item">
      <span class="text">Category 7</span>
    </div>
    <div class="item">
      <span class="text">Category 8</span>
    </div>
    <div class="item">
      <span class="text">Category 9</span>
    </div>
    <div class="item">
      <span class="text">Category 10</span>
    </div>

  </div>
</div>

Answer 1

由于默认语义样式和结构不允许您这样做，您需要在菜单项中添加一个 div 并将滚动添加到该 div。

你也可以尝试添加

.ui.selection.dropdown .menu {
  overflow: visible!important;
  max-height: none;
}

这将为您提供选择下拉列表中 .ui .dropdown 的确切样式。这是使用语义选择下拉菜单的最佳方式，而不是在不需要时添加滚动条。

这里是FIDDLE