JSFiddle - React, Tailwind, and code Playground

by manoj jasti

HTML

<div id="wrap">
    <ul style="width: 100%;" class="navbar" >
            <li>
                <a href="~/Default.aspx" >Home</a></li>
            
            <li><a href="#Performance">Performance ▼</a>
                <ul class="childNav">
                    <li>
                        <a href="~/Reports/Performance/PerformanceView.aspx">Performance View</a></li>
                    <li>
                        <a  href="~/Reports/Performance/PerformanceTrend.aspx">Peformance Trend</a></li>
                </ul>
            </li>
            <li><a href="#DelaysCoded">DelaysCoded ▼</a>
                <ul class="childNav">
                    <li>
                        <a href="~/Reports/DelaysCoded/DelaysCodedView.aspx">DelaysCoded View</a></li>
                    <li>
                        <a href="~/Reports/DelaysCoded/DelaysCodedTrend.aspx">DelaysCoded Trend</a></li>
                </ul>
            </li>
            <li>
                <a href="~/Support.aspx">support</a></li>
        </ul>
         </div>

CSS

#wrap
{
    width: 100%;
    height: 34px;
    margin: 10px 0px 10px 0px;
    z-index: 10000;
    position: relative;
    background-color: #cccccc;
    border: 1px solid #9b9b9b;
}

.navbar
{
    list-style: none; /* height: 20px;*/
    padding: 0;
    position: absolute;
    margin: 0;
    z-index: 10000;
}
.navbar li li
{
    white-space: nowrap;
    width: 100%;
    display: block;
}
.navbar li
{
    width: 200px;
    float: left;
    text-align: center;
    list-style: none;
    font: normal bold 14px/1em Verdana, Helvetica;
    font-weight: bold;
    padding: 0;
    margin: 0;
    background-color: #cccccc;
}
.navbar li a:hover
{
    color: White;
    background-color: #660099;
}

.navbar a
{
    padding: 10px 0;
    font-weight: normal;
    text-decoration: none;
    color: #660099;
    display: block;
}
.navbar li:hover, .navbar li.hover
{
    background-color: #cccccc;
}
.navbar li:hover ul li
{
     border-right:1px solid #9b9b9b;
    border-left:1px solid #9b9b9b;
}

.navbar li ul
{
    display: none;
    height: auto;
    margin: 0;
    padding: 0;
}

.navbar li:hover ul, .navbar li.hover ul
{
    position:absolute;
    display: block;
    border-top: 1px solid #9b9b9b;
}
.navbar li ul li
{
    background-color: #cccccc;
}
.navbar li:hover ul li
{
    border-bottom: 1px solid #9b9b9b;
}

.navbar li ul li a:hover
{
    background-color: #660099;
    color: white;
}