Javascript 面向类的下拉菜单

我刚刚开始使用面向类/OOP编程。我很难将香草JS“翻译”到一个类中

我正在使用最多两个级别的下拉菜单。我找到了一个简单的香草JS解决方案，但我不知道如何“翻译”它。 任何帮助都将不胜感激，因为网上几乎没有例子

到目前为止，我所拥有的：

import BaseFeature from '../../foundation/base/base';

class Dropdown extends BaseFeature {
    constructor(element) {
        super(element);
        this.elm = element;
        this.initDomCache();
        this.addEventListeners();
    }

    }

export default Dropdown;

JS

function dropDown(a) {
var li = a.parentElement,
    submenu = li.getElementsByTagName('ul')[0];

submenu.style.display = submenu.style.display == "block" ? "none" : "block";

return false;

    a {
    color: #06c;
}
ul {
    display: none;
    padding: 0;
    margin: 0;
    background: pink;
    float: left;
}
ul.nav-menu {
    display: block;
}
li {
    float: left;
    display: inline;
    position: relative;
    width: 150px;
    list-style: none;
}
#menu {
        position: absolute;
    left: 0;
    top: 100%;
    background: #ccc;
    display: none;
}


.menu1 {
    position: absolute;
    left: 0;
    top: 100%;
    background: #ccc;
    display: none;
}

ul.nav-menu > li > ul > li ul
{
   left: 100%;
   top: 0px;
   position: absolute;
}

}

HTML

<p>Dropdown multilevel</p>

干杯

    a {
    color: #06c;
}
ul {
    display: none;
    padding: 0;
    margin: 0;
    background: pink;
    float: left;
}
ul.nav-menu {
    display: block;
}
li {
    float: left;
    display: inline;
    position: relative;
    width: 150px;
    list-style: none;
}
#menu {
        position: absolute;
    left: 0;
    top: 100%;
    background: #ccc;
    display: none;
}


.menu1 {
    position: absolute;
    left: 0;
    top: 100%;
    background: #ccc;
    display: none;
}

ul.nav-menu > li > ul > li ul
{
   left: 100%;
   top: 0px;
   position: absolute;
}