JSFiddle - React, Tailwind, and code Playground

by il kamil

HTML

<nav>

<ul>

    <li><a href="">HOME</a></li>
    <li><a href="">PRODUCTS</a>
        <ul>
            <li><a href="">T-SHIRTS</a></li>
            <li><a href="">MUGS</a></li>
            <li><a href="">CUPS</a></li>
            <li><a href="">JEANS</a></li>            
        </ul>        
    </li>
    <li><a href="">SERVICES</a></li>
    <li><a href="">GALLERY</a></li>
    <li><a href="">ABOUT US</a></li>
    <li><a href="">CONTACT US</a></li>

 </ul>


 </nav>

CSS

nav{
   width:1000px;
   height:50px;
   background-color:#333;
   font-family: NeoSans;
   line-height:50px;
 }

 nav ul,  nav ul li{
   list-style: none;
    padding:0;
    margin:0;
 }

 nav ul li ul{
   display: none;
 }

 nav ul li{
   display: inline;
   float: left;
   position:relative;
 }

 nav ul li a{
   color: #CCC;
   text-decoration: none;   
   padding:0 10px;
    display:block;
 }

 nav ul li a:hover{
   color: #F60;
   background-color: #000;
 }
 nav ul li:hover ul{
    display:block;
    position:absolute;
    left:0;
    width:200px;
    top:51px;
    background:#333;
    text-align:left;
 }
 nav ul ul li{
     float:none;
    display:block;
 }
 nav ul ul li a{
     padding:0;
    disbplay:block;
    padding:0 10px;
 }