JSFiddle - React, Tailwind, and code Playground

by Kamlesh Gupta

HTML

<ul class="mainNav">
                <li><a href="">Home</a></li>
                <li class="dropdown">
                    <a href="">Treatments</a>
                    <ul>
                        <li><a href="">Body Treatments</a></li>
                        <li><a href="">Make Up</a></li>
                        <li><a href="">Skincare</a></li>
                        <li><a href="">Hand & Feet Treats</a></li>
                        <li><a href="">Hair Removal</a></li>
                        <li><a href="">Alternative Therapies</a></li>
                        <li><a href="">Eye Enhancements</a></li>
                    </ul>
                </li>
                <li><a href="">Gallery</a></li>
                <li class="dropdown">
                    <a href="">Aftercare</a>
                    <ul>
                        <li><a href="">Body</a></li>
                        <li><a href="">Make up</a></li>
                        <li><a href="">Skin</a></li>
                        <li><a href="">Hand</a></li>
                    </ul>
                </li>
                <li><a href="">Contact</a></li>
            </ul>

CSS

.mainNav {
    border-top: 1px solid #f6634c;
    border-bottom: 1px solid #f6634c;
    height: 43px;
  list-style:none;
}
    .mainNav li {
        float: left;
        font-size: 16px;
        position:relative;

    }
        .mainNav li a {
            padding: 13px 1.03em 10px;
            display: block;
            color: #767676;
            -webkit-transition: all 0.3s ease-out;
              -moz-transition: all 0.3s ease-out;
              -o-transition: all 0.3s ease-out;
              transition: all 0.3s ease-out;

        }
            .mainNav li a:hover, .mainNav li a:focus {
                background-color: #fba89b;
                color: #fff;
            }
    .mainNav span {
          font-size: 19px;
          position:relative;
          right: -5px;
          top: 2px;
          line-height: 1px;
    }

.dropdown ul {
    position:absolute;
    top: 43px;
    z-index: 100;
    border-left: 1px solid #f6634c;
    border-bottom: 1px solid #f6634c;
    border-right: 1px solid #f6634c;
} 
    .dropdown ul li a{
        background-color: #fff;
        width: 150px;
        text-align: left;
    }

JavaScript

var $dropdown;

$('.dropdown ul').hide();
$('.dropdown').hover(function() {
    $dropdown = $(this).find('ul');
    $dropdown.stop().slideDown(500);
}, function() {
    $dropdown.stop().slideUp(200);
});