JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#"><span><img src="http://help.newsbin.com/extensions/ImageMap/desc-20.png"/></span>Subservices</a> 
                <div>
                dhdhsdhshdh
            </div></li>
                <li><a href="#">subcategories</a>   
                 <div class="hello">
                dhdhsdhshdh
            </div>
                </li>
                <li><a href="#">hello</a>
                <div class="hello">
                    dhdhsdhshdhd hdhsdhshdhdh dhsdhsh dhdhdhs dhshdhdh dhsdhshdh
            </div></li>
            </ul>
           
        </li>
        <li><a href="#">Products</a>
        
        </li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact Us</a></li>    
    </ul>
    
    </nav>

CSS

nav{
    width:100%;
}
nav ul{
    margin:0;width:100%;
    padding: 15px 4px 17px 0;
    display: inline-block; 
    background:orange;
    list-style: none;
   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
nav ul li{
    display:inline-block;
    position:relative;
   padding:1% 1%;
   text-align:center;
    background:#fff;color:#000;
     -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
nav ul li:hover{
    margin:0;padding:1% 1%;
}
ul li a{
    margin:0;
    text-decoration:none;
    color:#000;
}

nav ul li ul{
    margin:0;
    padding:10px 0 10px 0;
    display:none;
     position: absolute;
      top: 30px;
      left: 0;
width:400px;color:#fff;
    height:300px;
    background:blue;
}
nav ul li ul h1{
    margin:0;padding:0;
    
}

nav ul li ul li div{
    margin:0 auto;
    padding:0 5px 10px 5px;
    display:none;background:#fff;
     position: absolute;
      top: 36px;
      left:0;
    right:auto;
    height:100px;
    z-index:1;
    text-align:center;    
}
nav ul li ul li:last-child div{right:0;background:green;white-space:normal;}
nav ul li ul li {
    display:inline-block;
   -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
background:none;
}
nav ul li ul li a{color:#fff;}
nav ul li ul li a:active{background:none;color:#fff;}
nav ul li ul li a:hover,nav ul li ul li a:visited{color:#000;}
nav ul li ul li:hover{
    background:#fff;color:#000;
    -webkit-border-radius:4px 4px 0 0;
    border-radius:4px 4px 0 0; 
}
nav ul li ul li:active,nav ul li ul li:visited{color:#fff;}
nav ul li ul li a{
    display:block;
    width: 114px;
    padding: 5px 0;
    margin:0;   
}

ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

ul li:hover ul li:hover div {
 ...