JSFiddle - React, Tailwind, and code Playground

by idygress

HTML

<div class='tableItems'>
    <ul>
        <a href='#'><li>item 1</li></a>
        <a href='#'><li>item 2</li></a>
        <a href='#'><li>item 3</li></a>
    </ul>
</div>

<table>
     <tr class='tableRow'>
        <td >
            Menu
        </td>
        <td>
            Something
        </td>
        <td>
            Something else
        </td>
    </tr>     
    <tr class='tableRow2'>
        <td >
            Menu
        </td>
        <td>
            Something
        </td>
        <td>
            Something else
        </td>
    </tr>
     <tr class='tableRow'>
        <td >
            Menu
        </td>
        <td>
            Something
        </td>
        <td>
            Something else
        </td>
    </tr>
</table>

CSS

table {
    z-index: 1;
    position: absolute;
    float: left;
    border: 1px solid gray;
    border-spacing: 0 !important;
}
table tr, table td {
    border-spacing: 0 !important;
    border: 1px solid gray;
}
.tableItems {
    cursor: default;
    position: relative;
    z-index: 100;
    float:left;
    display:none;
    height: 24px;
    border:none;
    border:collapse;
}
.tableItems ul {
    height: 100%;
    background: black;
    -webkit-margin-before: 0 !important;
    -webkit-margin-after: 0 !important;
    -webkit-padding-start: 0 !important;
}
.tableItems ul li {
    color: white;
    height:100%;
    display:block;
        background: black;

    vertical-align: middle;
    text-align: center;
    padding: 0 0 0 6px;
    z-index:1000;
}

JavaScript

$(".tableRow").click (
    function() {
        $(".tableItems").show().position().animate({},175);
    }
);
$(".tableRow").mouseout(
    function() {
        $(".tableItems").hide();
    }
);