JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <header>
    <nav class="main-menu">
      <h3>Main menu</h3>
      <ul>
        <li class="behandlinger-item"><a href="#behandlinger">Behandlinger</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 3</a></li>
        <li><a>Item 4</a></li>
      </ul>
    </nav>

    <nav class="mobile-main-menu">
      <h3>Mobile main menu</h3>
      <ul>
        <li class="mobile-item behandlinger-item"><a href="#behandlinger">Behandlinger</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 3</a></li>
        <li><a>Item 4</a></li>
      </ul>
    </nav>
  </header>

  <section> <!-- Separated to follow page scroll -->
    <div id="behandlinger"> <!-- Scroll to position on item click -->
      <nav class="behandlinger-meny">
        <script></script> <!-- Script in question  -->
        <ul>
          <li><a>Sub item 1</a></li>
          <li><a>Sub item 2</a></li>
          <li><a>Sub item 3</a></li>
        </ul>
      </nav>
    </div>
  </section>

  <main>
    …
  </main>
</div>

CSS

main, h3 {
  padding: 10px;
  margin:0;
}
#wrapper {
  background-color: #eae3db;
  margin: 20px auto;
  width:90%;
}

.behandlinger-meny {
    height: 0;
    transition: all .3s cubic-bezier(0.4, 0.0, 0.2, 1);
    overflow: hidden;
    background-color: #f4f1ed;
}

.behandlinger-meny ul {
    overflow-x: auto;
    overflow-y: hidden; 
    margin:12px ;
    padding: 0;
    text-align: center;
    white-space: nowrap;
}

.behandlinger-meny ul::-webkit-scrollbar {
    display: none;
}

.behandlinger-meny li {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    list-style: none;
    text-align: center;
}

.behandlinger-meny a {
    border-radius: 5px;
    display: inline-block;
    padding: 6px 12px;
    transition: all .2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.behandlinger-meny li:hover a {
    background-color: #eae3db;
}

JavaScript

var submenu = document.querySelector('.behandlinger-meny');
var menuTrigger = document.querySelector('.behandlinger-item');

//javascript version of jQuery isChild()
function isChild(item, parentItem) {
    while (item != undefined && item != null && item.tagName.toUpperCase() != 'BODY'){
        if (item == parentItem){
            return true;
        }
        item = item.parentNode;
    }
    return false;
}

menuTrigger.addEventListener('click', function() {
    submenu.style.height = '55px';
});

document.querySelector('body').addEventListener('click', function(e) {
    if ( !isChild(e.target, menuTrigger) && !isChild(e.target, submenu) ) {
        submenu.style.height = 0;
    }
});

document.addEventListener('keyup', function(e) {
    if ( e.key == 'Escape' ) {
        submenu.style.height = 0;
    }
});