JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dropdown">
    <li><a href="#" class="noclick nojs">Select your Topic</a>
      <ul class="nojs" >
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
    <li><a href="#" class="noclick nojs">Select your Industry</a>
      <ul class="nojs" >
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
    <li><a href="#" class="noclick nojs">Select your Category</a>
      <ul class="nojs" >
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
</ul>

CSS

body { padding:10px; font:12px Arial; }
a { text-decoration:none; }

.dropdown { padding:5px; overflow:hidden; }
.dropdown > li { float:left; background:#efefef; border-right:#666 1px dotted; }
.dropdown > li:hover { background:#eee; }
.dropdown > li a { display:inline-block; padding:10px; }
.dropdown > li.selected > a,
.dropdown > li a:hover { background:#999; color:#fff; }
.dropdown > li > ul { display:none; }
.dropdown > li > ul a { padding:5px; }

JavaScript

$('.dropdown li').click(function() {
    //Hide all other drop downs that are visible, and remove the class 'selected'
    $(this).siblings('.selected').removeClass('selected').find('ul:visible');

    //Show/Hide dropdowns
    $(this).toggleClass('selected');
    $('ul:first', this).stop(true, true).slideToggle('fast');
});