JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menus">
    <ul>
        <li tabindex="0"><a href="HomePage.html">Home</a></li>
        <li tabindex="0"><a href="#">Users</a></li>
        <li tabindex="0"><a href="#">Project Manage</a></li>
        <li tabindex="0" class="menu"><a href="#">Transaction</a>
        <ul class="nav-secondmenu">
							<li><a href="#">Drop Down 1</a></li>
							<li><a href="#">Drop Down 2</a></li>
							<li><a href="#">Drop Down 3</a></li>
							<li><a href="#">Drop Down 4</a></li>
							<li><a href="#">Drop Down 5</a></li>
						</ul>
            </li>
        <li tabindex="0" style="border-right:none;"><a href="#">Logout</a></li>
        
    </ul>
</div>

CSS

li.menu:onclick  {
  background: red;
  outline: 0;
  display:block;
}
ul.nav-secondmenu{
  display:none;
}