JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <ul id="nav">
        <li><a href="#">Home</a>

        </li>
        <li id="clickMe"><a href="#s1">Menu 1</a>
 <span id="s1"></span>

            <ul class="subs">
                <li><a href="#">Header a</a>

                    <ul>
                        <li><a href="#">Submenu x</a>

                        </li>
                        <li><a href="#">Submenu y</a>

                        </li>
                        <li><a href="#">Submenu z</a>

                        </li>
                    </ul>
                </li>
                <li><a href="#">Header b</a>

                    <ul>
                        <li><a href="#">Submenu x</a>

                        </li>
                        <li><a href="#">Submenu y</a>

                        </li>
                        <li><a href="#">Submenu z</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="clickMe"><a href="#s2">Menu 2</a>
 <span id="s2"></span>

            <ul class="subs">
                <li><a href="#">Header c</a>

                    <ul>
                        <li><a href="#">Submenu x</a>

                        </li>
                        <li><a href="#">Submenu y</a>

                        </li>
                        <li><a href="#">Submenu z</a>

                        </li>
                    </ul>
                </li>
                <li><a href="#">Header d</a>

                    <ul>
                        <li><a href="#">Submenu x</a>

                        </li>
                        <li><a href="#">Submenu y</a>

                        </li>
                        <li><a href="#">Submenu z</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#s3">Menu 3</a>
 <span id="s3"></span>

            <ul class="subs">
                <li><a href="#">Header e</a>

  ...

CSS

* {
      margin: 0;
      padding: 0;
  }
  html {
      background-color: #fff;
      height: 100%;
  }
  body {
      color: #333333;
      font: 0.75em/1.5em Arial, sans-serif;
  }
  .container {
      margin-left: auto;
      margin-right: auto;
      margin-top: 30px;
      width: 96%;
  }
  /* common and top level styles */
  #nav span {
      display: none;
  }
  #nav, #nav ul {
      list-style: none outside none;
      margin: 0;
      padding: 0;
  }
  #nav {
      background-color: #F5F5F5;
      border-bottom: 5px solid #333333;
      float: left;
      margin-left: 1%;
      margin-right: 1%;
      position: relative;
      width: 98%;
  }
  #nav ul.subs {
      background-color: #FFFFFF;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
      color: #333333;
      display: none;
      left: 0;
      padding: 2%;
      position: absolute;
      top: 54px;
      width: 96%;
  }
  #nav > li {
      border-bottom: 5px solid transparent;
      float: left;
      margin-bottom: -5px;
      text-align: left;
      -moz-transition: all 300ms ease-in-out 0s;
      -ms-transition: all 300ms ease-in-out 0s;
      -o-transition: all 300ms ease-in-out 0s;
      -webkit-transition: all 300ms ease-in-out 0s;
      transition: all 300ms ease-in-out 0s;
  }
  #nav li a {
      display: block;
      text-decoration: none;
      -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
      -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
      -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
      -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
      transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
      white-space: normal;
  }
  #nav > li > a {
      color: #333333;
      display: block;
      font-size: 1.3em;
      line-height: 49px;
      padding: 0 15px;
      text-transform: uppercase;
  }
  #nav >...

JavaScript

$('#nav > li').click(function () {
      $(this).siblings().find('ul.subs').hide();
      $(this).find('ul.subs').toggle();
  });