JSFiddle - React, Tailwind, and code Playground

HTML

<table class="report-table">
<tr>
  <td>£600<td><span class="dropbtn">I'm the icon to hover over</span>
        <table class='dropdown-years'>
            <tr>
                <td>Year 1</td>
                <td>£3400</td>
            </tr>
            <tr>
                 <td>Year 2</td>
                 <td>£400</td>
            </tr>
         </table>
</table>

CSS

.report-table {
    border-radius: 0.5em;
    border-collapse: collapse;
    font-size: 1.1em;
    margin: 25px auto;
    max-width: 100%;
    table-layout: fixed;
    background: green;
    color: white;
  }


.dropdown-years {
    /* display: none; */
    position: absolute;
    background-color: blue;
    z-index: 9999999999;
  }
  
  .show {
    display: block;
  }

JavaScript

/* document.querySelectorAll('.dropbtn').forEach(item => {
        item.addEventListener('mouseenter', (e) => {
            e.currentTarget.parentNode.querySelector('.dropdown-years').classList.toggle('show')
        })
        item.addEventListener('mouseleave', (e) => {
            e.currentTarget.parentNode.querySelector('.dropdown-years').classList.toggle('show')
        })
    }) */