JSFiddle - React, Tailwind, and code Playground

by Lucas de Paula

HTML

<div id="navigation">
  <ul>
     <li>
       <div class="dropdown">
          <a href="products.asp">Products</a>                           
          <div class="dropdown-content">
            <a href="products.ASP">Item1</a>
            <a href="products.ASP">Item2</a>
            <a href="products.ASP">Item3</a>
            <a href="products.ASP">Item4</a>
            <a href="products.ASP">Item5</a>
          </div>
        </div>
      </li>
  </ul>
</div>

CSS

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #004B60;
width: 180px;
box-shadow: 0px 8px 100px 0px rgba(0,0,0,0.2);
padding: 0px 0px;
top:100%;
z-index:1;
height:380px; 
line-height:5px; 
text-decoration: none; 
color:#fff; 
padding:0 15px;
}

.dropdown-content a {
  line-height: 30px !important;
  padding: 4px !important;
}

.dropdown:hover .dropdown-content {
display: block;
}

#navigation { white-space:nowrap; }
#navigation ul{ list-style-type: none; height:20px; font-weight: bold;    float:left;}
#navigation ul li{ float:left; display:inline; }
#navigation ul li a{ float:left; line-height:64px; text-decoration: none; color:#fff; padding: 15px;}
#navigation ul li a.active,
#navigation ul li a:hover{ background:#fff; color:#8b0000; }