JSFiddle - React, Tailwind, and code Playground

by Maulik Anand

HTML

<div id="container">
    <nav>
        <ul class="menu">
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">About Us</a>
            </li>
            <li><a href="#" id="submenu">Gallery</a>

                <ul class="submenu" id="drop">
                    <li><a href="#">Gallery1</a>
                    </li>
                    <li><a href="#">Gallery2</a>
                    </li>
                    <li><a href="#">Gallery3</a>
                    </li>
                    <li><a href="#">Gallery4</a>
                    </li>
                    <li><a href="#">Gallery5</a>
                    </li>
                </ul>
            </li>
            <li><a href="#" id="submenu">Site Map</a>

                <ul class="submenu" id="drop">
                    <li><a href="#">SiteMap1</a>
                    </li>
                    <li><a href="#">SiteMap2</a>
                    </li>
                    <li><a href="#">SiteMap3</a>
                    </li>
                    <li><a href="#">SiteMap4</a>
                    </li>
                    <li><a href="#">SiteMap5</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a>
            </li>
        </ul>
    </nav>
</div>

CSS

#container {
     width: 100%;
     float: left;
     margin: 50px 0 0 50px;
 }
 nav ul {
     float: left;
     background-color: #ffa800;
     border-radius: 3px;
     position: relative;
 }
 nav ul.menu li {
     height: 35px;
     float: left;
     display: inline;
     list-style-type: none;
     line-height: 15px;
     padding: 10px 20px;
     position: relative;
 }
 nav ul.menu li a {
     text-decoration: none;
     font: bold 14px Arial, Helvetica, sans-serif;
     color: #fff;
 }
 nav ul.menu li:hover a {
     color: #c14a02;
 }
 nav ul.menu li ul.submenu {
     width: 100%;
     position: absolute;
     top: 35px;
     left: 0;
     background-color: #e5e4e4;
     border: none;
     text-align: center;
     margin: 0px;
     opacity:0;
     visibility:hidden;
     transition-duration:.4s;
     -webkit-transform:translateX(-50px);
     -moz-transform:translateX(-50px);
     -o-transform:translateX(-50px);
     transform:translateX(-50px);
 }
 nav ul.menu li:hover ul.submenu {
     opacity:1;
     visibility:visible;
     -webkit-transform:translateX(0);
     -moz-transform:translateX(0);
     -o-transform:translateX(0);
     transform:translateX(0);
 }
 nav ul.menu li ul.submenu li {
     width: 100%;
     text-align: center;
     margin: 0;
     padding: 10px 5px 0 0;
 }
 nav ul.menu li ul.submenu li a {
     color: #464645;
 }
 nav ul.menu li ul.submenu li a:hover {
     color: #ffa800;
 }
 //-------------------------Transition Code---------------- nav ul.menu li {
     transition: all 0.2s;
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
 }
 nav ul.menu li a {
     transition: all 0.5s;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
 }
 li ul {
     transition-duration:0.4s;
     opacity:0;
 }
 li:hover>ul {
     opacity:1;
 }

JavaScript

/* $(document).ready( function(){

                $('#submenu').click( function(event){
                    event.stopPropagation();
                    $('#drop').toggle();
                });

                $(document).click( function(){
                    $('#drop').hide();
                });

            });*/