Semantic-UI: [Dropdown] Trigger dropdown menu on click on deeper levels of dropdown menus (instead of hover)

On multi level dropdown lists, the deeper-level dropdown menus are triggered on hover, not on click, even when in the JS initialization, it’s specified the triggering event would be click. Here’s a link to the JS fiddle. How do I trigger those deeper-level dropdown menus on click instead?

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

Here’s the JS initialization:

$('.ui.dropdown').dropdown({
    on: 'click',
    action: 'nothing'
});

Thanks!