JSFiddle - React, Tailwind, and code Playground

by sharma_pooja

HTML

<div style="float:left; height:200px; width:100%; background:red; overflow:hidden; position:relative">
        
           <div class="actionlist">
                <ul class="dott">
                <li>
                  <a href="#">Download</a>
                   <div class="popup_div">
                 
                   <em></em>
                 <ul>
                 <li><a href="#">ddssdfsdffds</a></li>
                  <li><a href="#">ddssdfsdffds</a></li>
                   <li><a href="#">ddssdfsdffds</a></li>
                    <li><a href="#">ddssdfsdffds</a></li>
                     <li><a href="#">ddssdfsdffds</a></li>
                 
                 </ul>
                
                
                
                </div>
                  
                 
               
                
                
                </li>
                  <li><a href="#">Add to Basket</a>
                  
                  
                   <div class="popup_div"><em></em>
                
                 <ul>
                 <li><a href="#">ddssdfsdffds</a></li>
                  <li><a href="#">ddssdfsdffds</a></li>
                   <li><a href="#">ddssdfsdffds</a></li>
                    <li><a href="#">ddssdfsdffds</a></li>
                     <li><a href="#">ddssdfsdffds</a></li>
                 
                 </ul>
                
                
             
                  
                  </div>
                  
                    
                  
                  </li>
                    <li><a href="#">Share</a>
                    
                    <div class="popup_div"><em></em>
                   
                 <ul>
                 <li><a href="#">ddssdfsdffds</a></li>
                  <li><a href="#">ddssdfsdffds</a></li>
                   <li><a href="#">ddssdfsdffds</a></li>
                    <li><a href="#">ddssdfsdffds</a></li>
                     <li><a href="#">ddssdfsdffds</a></li>
 ...

CSS

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