Semantic UI - Is it possible to use a form in a dropdown menu?

Question

Using SemanticUI, is it possible to insert a form with dropdown items nested in a dropdown menu?

Here is a fiddle to show what I mean: https://jsfiddle.net/Nanego/tnv34c7b/5/

<div class="ui top attached menu">
  <div class="ui dropdown icon item">
    <i class="wrench icon"></i>
      <div class="menu">
        <div class="ui segment">
          <form class="ui form">
            <div class="field">
              <div class="ui form">
                <div class="field">
                  <label>Country</label>
                  <select multiple="" class="ui dropdown">
                    <option value="">Select Country</option>
                    <option value="AF">Afghanistan</option>
                    <option value="AX">Åland Islands</option>
                    ...
                    <option value="CM">Cameroon</option>
                  </select>
                </div>
              </div>
            </div>
          <button class="ui button" type="submit">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

Actually, the real problem in my case was the "simple" class added to the dropdown element.

Using semantic-ui-react, I was calling the component this way:

<Dropdown item icon='wrench' simple>

We have to remove the 'simple' attribute if we want to add nested components in our dropdown.

Answer 2

The nested dropdown will be rendered correctly if the second jquery selector in the jsfiddle is replaced with

$('.selection.dropdown').dropdown();