JSFiddle - React, Tailwind, and code Playground

by Sam Korn

HTML

<div id="linkbar">
    <ul id="menu">
        <li style="margin-left: 2px;"><a href="#">Home</a>

        </li>
        <li><a href="#">About Us</a> 
        </li>
        <li><a href="services.html">Services</a>

            <ul class="submenu">
                <li><a href="trademarks.html">Trademarks</a>

                </li>
                <li><a href="Patents.html">Patents</a>

                </li>
                <li><a href="copyright.html">Copy Right</a>

                </li>
                <li><a href="design registration.html">Design Registration</a>

                </li>
                <li><a href="iso9001.html">ISO 9001</a>

                </li>
                <li><a href="roc.html">Company Formation</a>

                </li>
                <li><a href="importexpertcode.html">Import Export Code</a>

                </li>
                <li><a href="shop establishment.html">Shop Extablishment</a>

                </li>
                <li><a href="tax Duties.html">Tax- Duties</a>

                </li>
                <li><a href="patnershipworks.html">Partnership Works</a>

                </li>
            </ul>
        </li>
        <li><a href="contactus.html">Contact us</a> 
        </li>
        <li><a href="application status.html">Application Status</a>

        </li>
    </ul>
</div>

CSS

ul {
    font-family: Arial, Verdana;
    font-size: 10px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul#menu > li {
    display: block;
    position: relative;
    float: left;
    display: inline;
    list-style-type: none;
}
ul#menu li ul {
    display: none;
    position: absolute;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
    text-align: center;
}
ul li a:hover {
    background: #617F8A;
}
/* ul li:hover ul
    {
        display: block;
        position: absolute;
        text-align: center;
    }
    li:hover li
    {
        font-size: 13px;
    }*/
 li:hover a {
    background: #617F8A;
}
li:hover li a:hover {
    background: #2C5463;
}

JavaScript

$(document).ready(function () {
    $("#menu li").mouseover(function () {
        $(".submenu").stop().slideDown();
    });

    $("#menu").mouseout(function () {
        $(".submenu").hide();
    });
});