JSFiddle - React, Tailwind, and code Playground

by suresh ponnukalai

HTML

<nav class="top-nav">
        <ul>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Headshots</a></li>
            <li><a href="#">Performances</a>
                <ul>
                    <li><a href="#">Fantasticks</a></li>
                    <li><a href="#">Little Women</a></li>
                    <li><a href="#">Tough Jet Girl</a></li>
                </ul>
            </li>
            <li><a href="#">Resume</a></li>
            <li><a href="#">Videos</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav><!--- End top-nav -->

CSS

.top-nav ul li:hover ul {
background: #E08399;
background: linear-gradient(top, #E08399 0%, #D66082 40%);
background: -moz-linear-gradient(top, #E08399 0%, #D66082 40%);
background: -webkit-linear-gradient(top, #E08399 0%,#D66082 40%); 
border-radius: 0px 0px 5px 5px; 
padding-left: 0px;
padding-top: 5px;
padding-bottom: 5px;
position: absolute;
top:100%;
box-shadow: 0px 3px 8px #9C8066;
z-index: 5;
display:block;
list-style-type:none;
}
.top-nav ul li ul{display:none}
.top-nav ul li{position:relative;}