JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="product_resulttable">
          
              <tr>
               
                <td>DMC-ZS19K<br />
 
Manual pics</td>
                <td>03 Oct,2012</td>
                <td>25,500</td>
                <td><div class="actionlist">
                <ul class="dott">
                <li><a href="#">Download</a>
               
                <div class="popup_div"><em></em>
                 
                </div>
                
                </li>
                  <li><a href="#">Add to Basket</a>
                    <div class="popup_div"><em></em>
                 
                </div>
                  
                  
                  </li>
                    <li><a href="#">Share</a></li>
                </ul>
                
                
                </div></td>
              </tr>
    </table>

CSS

.actionlist { background:#e6eaf6; border:1px solid #d9e0f4; border-radius:5px; width:132px;  padding:8px 0 }
.dott { list-style:none;  background:yellow }
.dott li { display:block;position:relative }
.dott li a { display:block; padding:2px 9px; color:#454545; font-size:11px; }
.popup_div{position:absolute; z-index:9999; background:#f5f6fb; width:140px; border:1px solid #c2d0eb; min-height:140px; left:-5px; display:none }
div.actionlist ul li:hover > div.popup_div { display:block; }