JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<div class="topnav">
  <a id="Home"     runat="server"  href="~/Default.aspx">Home</a>
  <a id="Team"     runat="server"  href="~/Team.aspx">Team</a>
  <a id="Products" runat="server"  href="~/Products.aspx">Products</a>
       
    <div class="Resources" runat="server" href="~/Products.aspx">
  <button onclick="myFunction()" class="dropbtn">Resources</button>
  <div id="myDropdown" class="dropdown-content">            
<a id="A1" runat="server"  href="~/Products.aspx">StockImages</a>
<hr>
 <a id="A2" runat="server"  href="~/Products.aspx">Stock Images</a>
 <hr>
 <a id="A3" runat="server"  href="~/Products.aspx"> How-To's</a>
 <hr>
  </div>
</div>
    

  <a id="Tools" runat="server"  href="~/Tools.aspx">Tools</a>
  <a id="Contact"  runat="server"  href="~/ContactUs.aspx">Contact</a>


</div>

CSS

.Resources.showme {
  display: none;
}

.Resources:hover .showme {
  display: block;
}


    /* Add a black background color to the top navigation */
.topnav {
    background-color: #1d1e22;
    overflow: hidden;
    width:800px;
    float:right;
    padding-top:70px;
    font-weight:bold;
}

/* Style the links inside the navigation bar */
.topnav a  {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    border-bottom: 3px solid transparent;
}

.topnav a:hover {
    border-bottom: 3px solid white;
}

.topnav a.active {
    border-bottom: 3px solid white;
}

/* Style the links inside the navigation bar */
.topnav .Resources  {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    border-bottom: 3px solid transparent;
}

.topnav .Resources:hover {
    border-bottom: 3px solid white;
}

.topnav .Resources.active {
    border-bottom: 3px solid white;
}

JavaScript

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}