JSFiddle - React, Tailwind, and code Playground

by Raman Mandal

HTML

<table class="dp-table">
    <tbody><tr>
        <td></td>
        <td>
            <ul class="dropv">
                <li><a href="#">Exports
                    <table class="js-items innerTable">
                        <tbody>
                    <tr><td>2014-05-19 11:31</td>
<td class="right"><a>Download</a></td>
</tr><tr><td>2014-05-19 12:20</td>
<td class="right"><a>Download</a></td>
</tr></tbody></table>
                </a></li>
            </ul>
        </td>
    </tr>
</tbody></table>

CSS

.dp-table { float: left; }
.dropv, .dropv ul {padding: 0; margin: 0; list-style: none;}
.dropv a {display: inline; width: 200px;}
.dropv li {float: left; padding: 0px 8px 2px 0px;}  /* all list items */
.dropv li table {position: absolute; background: #241F1B; z-index: 1000;
  padding: 0px 0px 0px 4px; width: 370px; left: -9999px;padding-top: 0.4375rem;} /* second-level lists */
  .dropv li:hover table {left: auto; } /* nest list under hovered list items */
  .dropv li table a {color: $activeColor; cursor: pointer; transition: color 0.5s ease; text-decoration: none;}
.dropv li table a:hover {color: #FFFFFF;}
.dropv li table {
    display: inline-block;
    max-width: 235px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #90887A;
    font-size: 0.8125rem;
    line-height: 2.2;
       border-radius: 10px;
    opacity: 0.9;

   
}

td.right {
    text-align: right;
    width: 50%;
}