JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navbar">
<ul class="horizontal">               
   <li><a href="#">Home</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Our Products</a>
        <ul>
            <li><a href="#">Apple</a></li>
            <li><a href="#">HTC</a></li>
            <li><a href="#">Nokia</a></li>
            <li><a href="#">Samsung</a></li>
        </ul>
   </li>
   <li><a href="#">Environment</a></li>
   <li><a href="#">Latest News</a></li>
   <li><a href="#">Contact Us</a></li>
</ul>
</div>

CSS

.horizontal {
    list-style-type:none; 
    margin:40 auto; 
    width:640px; 
    padding:0;  
    overflow:hidden;
} 

 .horizontal > li {
    float:left;
} 
  .horizontal li ul {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
 }   
.horizontal li:hover ul {
    display: block;
}  
.horizontal li a {
    display: block; 
    text-decoration:none; 
    text-align:center; 
    padding:22px 10px;
    font-family:Arial; 
    font-size:8pt; 
    font-weight:bold; 
    color:#FFFFFF; 
    text-transform:uppercase; 
    border-right:1px solid #607987; 
    background-color:#300000;  
    letter-spacing:.08em
 }
  
/* .horizontal li a:hover {
    background-color:#680000; 
    color:#a2becf
} */

.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }