JSFiddle - React, Tailwind, and code Playground

by manoj jasti

HTML

<div class="nav">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Performance</a>
            <ul>
                <li><a href="#">Performance View</a></li>
                <li><a href="#">Performance Trend</a></li>
            </ul>
        </li>
        <li><a href="#">DelaysCoded</a>
            <ul>
                <li><a href="#">DelaysCoded View</a></li>
                <li><a href="#">DelaysCoded Trend</a></li>
            </ul>
        </li>
        <li><a href="#">Support</a>
        </li>
    </ul>
</div>
<p>akshdfjksahfjhdsjkfhjkshajfhjhsajkdfhjsdahfj hjashd fjkhsdafjk hsadjkfh jkshafjkhsadjfhjhsadfjk hsafjkhsdh fhjksadhf jkshda fjkhjksadfhjksdhafjkhsajkfhjksafh </p>

CSS

.nav ul{
    position:relative;
    list-style:none;
    height:30px;
    
    }
.nav ul ul {
    display:none;
    position:absolute;
}
.nav ul li {
     display:block;
    float:left;
     background-color:#cccccc;
width:180px;
    text-align:center;
           font-size:1em;
     padding:5px 0px 5px 0px;
    cursor:pointer;
}
.nav ul li a {
    text-decoration: none;
    text-align:center;
}

.nav li:hover ul {
    display:block;
    padding:8px 0px 5px 0px;
    z-index:999;
    broder-top:2px solid #660099;
}

.nav ul ul li{
    float:none; 
    position:relative;
}

.nav li:hover {
   color:#9b9b9b;
}
.nav li a:hover{
    color:white;
}
.nav li li {
       display:block;
   }