JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="ui search selection dropdown" 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>
</div>
</div>

CSS

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

JavaScript

$('#test')
      .dropdown();