[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!

[awgv]

@quantran13 Sorry for the delay, that’s because .ui.dropdown is unnecessary for child dropdowns. So, instead of doing <div class="ui dropdown link item"> you should be doing <div class="link item">.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.