wc-menu-wrapper web component is available from GitHub and NPM registry
Click to toggle the menu:
Menu
1st item
2nd item
3rd item
Show HTML
<wc-menu-wrapper mode='click'
             position='bottom'
             direction='down'>
  <div class='heading'>Menu</div>
  <div class='item'> 1st item </div>
  <div class='item'> 2nd item </div>
  <div class='item'> 3rd item </div>
</wc-menu-wrapper>
Show CSS
.item, .heading {
  background-color: lightblue;
  display: none;
  width: 150px;
  height: 60px;
  align-items:center;
  justify-content:center;
}
item:hover {
  background-color: white;
  cursor: default;
}
.heading {
  background-color:#63b4cf;
}
Menu with submenu, both toggled by clicking:
Menu
1st item
Submenu
1st item
2nd item
3rd item
3rd item
Show HTML
<wc-menu-wrapper mode='click'
             position='bottom'
             direction='down'>
  <div class='heading'>Menu</div>
  <div class='item'> 1st item </div>
  <div class='item'>
    <wc-menu-wrapper mode='click'
                 position='right'
                 direction='down'>
      <div class='heading'>Submenu</div>
      <div class='item'> 1st item </div>
      <div class='item'> 2nd item </div>
      <div class='item'> 3rd item </div>
    </wc-menu-wrapper>
  </div>
  <div class='item'> 3rd item </div>
</wc-menu-wrapper>
Show CSS
.item, .heading {
  background-color: lightblue;
  display: none;
  width: 150px;
  height: 60px;
  align-items:center;
  justify-content:center;
}
item:hover {
  background-color: white;
  cursor: default;
}
.heading {
  background-color:#63b4cf;
}
Menu with submenu, both toggled by hovering:
Menu
1st item
Submenu
1st item
2nd item
3rd item
3rd item
Show HTML
<wc-menu-wrapper mode='hover'
             position='bottom'
             direction='down'>
  <div class='heading'>Menu</div>
  <div class='item'> 1st item </div>
  <div class='item'>
    <wc-menu-wrapper mode='hover'
                 position='right'
                 direction='down'>
      <div class='heading'>Submenu</div>
      <div class='item'> 1st item </div>
      <div class='item'> 2nd item </div>
      <div class='item'> 3rd item </div>
    </wc-menu-wrapper>
  </div>
  <div class='item'> 3rd item </div>
</wc-menu-wrapper>
Show CSS
.item, .heading {
  background-color: lightblue;
  display: none;
  width: 150px;
  height: 60px;
  align-items:center;
  justify-content:center;
}
item:hover {
  background-color: white;
  cursor: default;
}
.heading {
  background-color:#63b4cf;
}
Menu with submenu, toggled by click, submenu direction to right:
Menu
1st item
Submenu
1st item
2nd item
3rd item
3rd item
Show HTML
<wc-menu-wrapper mode='click'
             position='bottom'
             direction='down'>
  <div class='heading'>Menu</div>
  <div class='item'> 1st item </div>
  <div class='item'>
    <wc-menu-wrapper mode='click'
                 position='right'
                 direction='right'>
      <div class='heading'>Submenu</div>
      <div class='item'> 1st item </div>
      <div class='item'> 2nd item </div>
      <div class='item'> 3rd item </div>
    </wc-menu-wrapper>
  </div>
  <div class='item'> 3rd item </div>
</wc-menu-wrapper>
Show CSS
.item, .heading {
  background-color: lightblue;
  display: none;
  width: 150px;
  height: 60px;
  align-items:center;
  justify-content:center;
}
item:hover {
  background-color: white;
  cursor: default;
}
.heading {
  background-color:#63b4cf;
}
Closing the menu by dispatching menuClose event:
Main menu
1st item
2nd item
Click to close
Show HTML
<wc-menu-wrapper mode='click'
           position='bottom'
           direction='down'>
  <div class='heading'>Menu</div>
  <div class='item'> 1st item </div>
  <div class='item'> 2nd item </div>
  <div class='item' onclick='onClickFunc(this)'> Click to close </div>
</wc-menu-wrapper>
Show Javascript
function onClickFunc(elem) {
  elem.dispatchEvent(new CustomEvent('menuClose', {bubbles: true}))
}
Show CSS
.item, .heading {
  background-color: lightblue;
  display: none;
  width: 150px;
  height: 60px;
  align-items:center;
  justify-content:center;
}
item:hover {
  background-color: white;
  cursor: default;
}
.heading {
  background-color:#63b4cf;
}
Using heading-class to style the heading while the menu is open:
Menu
1st item
2nd item
3rd item
Show HTML
<wc-menu-wrapper mode='click'
           position='bottom'
           direction='down'
           heading-class='menuopen'>
  <div class='heading'>Menu</div>
  <div class='item'> 1st item </div>
  <div class='item'> 2nd item </div>
  <div class='item'> 3rd item </div>
</wc-menu-wrapper>
Show CSS
.item, .heading {
  background-color: lightblue;
  display: none;
  width: 150px;
  height: 60px;
  align-items:center;
  justify-content:center;
}
item:hover {
  background-color: white;
  cursor: default;
}
.heading {
  background-color:#63b4cf;
}
.menuopen {
  color:white;
  background-color:black;
}