Nested dropdown

components.dropdown-list-item.js

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({

  mouseEnter() {
    this.setActiveItems(this);
  },

  mouseLeave() {
    this.clearActiveItems();
  },

  isActive: computed('activeItems.[]', function() {
    return this.activeItems.objectAt(0) === this;
  })

});

components.dropdown-list.js

import Component from '@ember/component';
import { task, timeout } from 'ember-concurrency';
import { isEmpty } from '@ember/utils';

export default Component.extend({

  init() {
    this._super(...arguments);
    this.set('activeItems', []);
  },

  setActiveItems(...path) {
    this.updateActiveItems.perform(path);
  },

  clearActiveItems() {
    this.updateActiveItems.perform([]);
  },

  updateActiveItems: task(function*(path) {
    if (isEmpty(path)) {
      yield timeout(1000);
    }

    this.set('activeItems', path);
  }).restartable()

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

ul {
  width: 80px;
  display: flex;
}

li {
  background: #DAE1E7;
  width: 200px;
  padding: 10px;
  display: block;
  cursor: pointer;
}

#arrow-right {
	margin-top: 0px;
	height: 0px;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 50px solid #4F89BF;
  padding-right: 50px;
}

.active {
  background: #FFED4A;
}

templates.application.hbs

<div style="background-color:#009a49;">
<h1 style="color:#fff;text-align:center;">Example of a dropdown</h1>
</div>

{{#modal-dialog}}
  <DropdownList as |List|>
    <ul>
      <List.item as |Item|>
        <li class={{if Item.isActive 'active'}}>
          Services & Products

          {{#if Item.isActive}}
            <Item.sublist as |List|>
              {{#modal-dialog}}
                <ul style="display:block;position:absolute;z-index:1;">
                  <List.item as |Item|>
                    <li class={{if Item.isActive 'active'}}>
                      Seismic
                    </li>
                    
                    {{#if Item.isActive}}
                      {{#modal-dialog}}
                      <Item.sublist as |List|>
                      <ul style="display:block;position:absolute;z-index:1;margin-left:200px;">
                      <List.item as |Item|>
                              <li class={{if Item.isActive 'active'}}>Seismic Reservoir Characterization
                              </li>
                              </List.item>
                            <List.item as |Item|>
                              <li class={{if Item.isActive 'active'}}>Geophysical Processing & Imaging
                              </li>
                              </List.item>
                      </ul>
                      </Item.sublist>
                      {{/modal-dialog}}
                    {{/if}}
                  </List.item>                  
                 
                  <List.item as |Item|>
                    <li class={{if Item.isActive 'active'}}>
                      Drilling Services
                    </li>

                    {{#if Item.isActive}}
                      {{#modal-dialog}}
                        <Item.sublist as |List|>
                          <ul style="display:block;position:absolute;z-index:1;margin-left:210px;">
                            <List.item as |Item|>
                              <li class={{if Item.isActive 'active'}}>
                                Wellhead Systems
                              </li>
                            </List.item>
                            <List.item as |Item|>
                              <li class={{if Item.isActive 'active'}}>
                                Engineering & Real-Time Analysis
                              </li>
                            </List.item>
                          </ul>
                        </Item.sublist>
                      {{/modal-dialog}}
                    {{/if}}
                  </List.item>
                </ul>
              {{/modal-dialog}}
            </Item.sublist>
          {{/if}}
        </li>
      </List.item>
      <List.item as |Item|>
        <li class={{if Item.isActive 'active'}}>
        About Us
        </li>
      </List.item>
    </ul>
  </DropdownList>
{{/modal-dialog}}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<br/>
<span id="arrow-right"></span>

templates.components.dropdown-list-item.hbs

{{yield (hash
  isActive=isActive
  sublist=(component 'dropdown-list'
    setActiveItems=(action setActiveItems this)
    clearActiveItems=clearActiveItems
    activeItems=(drop 1 activeItems)
  )
)}}

templates.components.dropdown-list.hbs

{{yield (hash
  item=(component 'dropdown-list-item'
    activeItems=activeItems
    setActiveItems=(action setActiveItems)
    clearActiveItems=(action clearActiveItems)
  )
)}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-concurrency": "0.8.19",
    "ember-modal-dialog": "2.4.4",
    "ember-composable-helpers": "2.1.0"
  }
}