JSFiddle - React, Tailwind, and code Playground

by MItul Patel

HTML

<div class="btn-group links" id="dropdown-wrapper">
    <a href="" data-toggle="dropdown" id="toggle-dropdown">Het 10-stappenplan <i class="fa fa-caret-down"></i></span></a>
    <ul class="dropdown-menu">
        <li><a class="menulink" href="?p=stap1">Stap 1 - Een oriënterend gesprek</a></li>
        <li><a class="menulink" href="?p=stap2">Stap 2 - De AirAware Quickscan</a></li>
        <li><a class="menulink" href="?p=stap3">Stap 3 - Uw ambitie, wensen en eisen</a></li>
        <li><a class="menulink" href="?p=stap4">Stap 4 - Ons Advies</a></li>
        <li><a class="menulink" href="?p=stap5">Stap 5 - Uw keuze</a></li>
        <li><a class="menulink" href="?p=stap6">Stap 6 - Het ontwerp en de planning</a></li>
        <li><a class="menulink" href="?p=stap7">Stap 7 - De realisatie</a></li>
        <li><a class="menulink" href="?p=stap8">Stap 8 - Het beheer en onderhoud</a></li>
        <li><a class="menulink" href="?p=stap9">Stap 9 - De periodieke controle</a></li>
        <li><a class="menulink" href="?p=stap10">Stap 10 - Sale &amp; Leaseback</a></li>
    </ul>
</div>

CSS

.links .dropdown-menu li a.menulink{
    padding: 8px 5px 8px 5px;
    color: #000;
    width: 260px;
}

.links .dropdown-menu {
    animation: textColorfade 2s ease forwards !important;
    -webkit-animation: textColorfade 2s ease forwards !important
    color:black;
    display:none;
}
.links:hover .dropdown-menu{
    display:block;
}