JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class='toolbar'>
    <div class='buttons'>
      <button id='btn1'>
        Button 1
      </button>
      <div class='btn-wrapper'>
        <button id='btn2'>
          Button 2
        </button>
        <div id='sub-memu' class='subMenu'>
          <a href='#'>Can you click me?</a>
          <a href='#'>Can you click me?</a>
          <a href='#'>Can you click me?</a>
          <a href='#'>Can you click me?</a>
        </div>
      </div>
    </div>
  </div>
  <main>
    This is my main element.
    <a href="#">You should be able to click me</a>.
  </main>
</body>

CSS

html{
  pointer-events:none;
}
body *{
  pointer-events:initial;
}
body {
  background-color: gray;
  height: 100vh;
  padding: 0px;
  margin: 0px;
  pointer-events:none;
}


.toolbar {
  height: 40px;
  background-image: linear-gradient(white, red);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35);
  position: relative;
}

.buttons {
  display: flex;
  flex-direction: row;
}

button {
  margin-right: 5px;
}

#sub-memu {
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 10px;
  min-width: 100px;
  z-index: -1;
  transform: translate(0px, -140%);
  transition: transform 1s;
}

main {
  padding: 10px;
  margin: 10px;
  background-color: yellow;
  height: calc(100% - 40px - 20px - 20px);
  position: relative;
  z-index: -2;
}

.show {
  transform: translate(0px, 25px) !important;
}

JavaScript

$('#btn2').on('click', function() {
  console.log('Click!');
  var element = document.getElementById("sub-memu");
  element.classList.toggle("show");
})