JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="cssdropdown">

    <li class="headlink">
        <a href="http://google.com/">HOME</a>

        <ul>
            <li><a href="http://google.com/">Google</a></li>
            <li><a href="http://yahoo.com/">Yahoo</a></li>
            <li><a href="http://live.com/">Live Search</a></li>
        </ul>
    </li>
</ul>
<iframe id="demo" src="http://192.168.0.240:8080/birt-viewer/frameset?__report=Listado-Mensual-Ventas.rptdesign&Fecha%20Inicial=<?php echo $dateIn; ?>&Fecha%20Final=<?php echo $dateOff; ?>" frameborder="0" width="100%" height = "100%" allowfullscreen></iframe>

CSS

#cssdropdown, #cssdropdown ul {
    list-style: none;
}

    #cssdropdown, #cssdropdown * {
    padding: 0;
    margin: 0;
}

    /* Head links */
#cssdropdown li.headlink {
    width: 120px;
    height:70px;
    float: left;
    text-align: center;
    position:relative;
}
#cssdropdown li.headlink a {
    display: block;
    padding-top:25px;
    padding-bottom: 15px;
    height: 30px;
    font-size:30px; 
    text-align:center;
    cursor:pointer;
}

    /* Child lists and links */
#cssdropdown li.headlink ul {
    display: none;
    border-top: 1px black solid;
    text-align: left;
    position:absolute;
    top:100%;
}
#cssdropdown li.headlink:hover ul {
    display: block;
}
#cssdropdown li.headlink ul li a {
    padding: 5px;
    height: 17px;
    font-size:15px;
    cursor:pointer;
}
#cssdropdown li.headlink ul li a:hover {
    background-color: #333;
}

    /* Pretty styling */
#cssdropdown a {
    color: white;
}
#cssdropdown ul li a:hover {
    text-decoration: none;
}
#cssdropdown li.headlink {
    background-color: rgb(0,0,0);
}
#cssdropdown li.headlink ul {
    background-color: rgb(51,51,51);
    background-position: bottom;
    padding-bottom: 10px;
}