JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation"><ul>
<li>
<a href="#">Home</a>
<ul>
<li><a href="#">Hello</a></li>
<li><a href="#">Hi</a></li>
<li><a href="#">About us</a></li>
</ul></li>
<li><a href="new  2.html">Products</a>
<ul>
<li><a href="#">Printing</a></li>
<li><a href="#">Scanning</a></li>
</ul>
</li>
<li><a href="sidebarright.html">Contact</a></li>
<li><a href="sidebarright.html">Payment</a></li>
</ul></div>

CSS

.navigation{ width:500px;margin:0; padding:0;}
.navigation li{
float:left; 
    position:relative;
    list-style:none;
}

.navigation li a{
color:white;
padding:.2em 1em;
background-color:black;
text-decoration:none;
font-size:20px;
background-color:black; 
border-right:1px white solid;
}

.navigation li a:hover{background-color:#eee;border-top:2px solid #ddd;color:#333;}
.navigation li ul {
     position: absolute; 
     display: none;
    width: inherit;
    left: -19px;

 }
.navigation li:hover ul {
display:block; 
width:100px;
margin: 4px 0 0 -20px;  
}
  .navigation li:hover ul li{
position: relative;

  list-style-type:none;
 float:left;
 }  
  .navigation li:hover ul li a{
  display:block;
  width:100px;
     float:left;
       color:red; 
   padding:.2em 1em;
  background-color:#eee; 
  border-bottom:thin black solid;
  }