JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<br>

<ul id="logo">
    <li>Vijay
       
    </li>
   
</ul>



<div id="vmenu">abcd</div>

CSS

#vmenu {
    
 display:none;   
    height:200px;
width:70px;
    
      
    margin-left:20px;
    border: 10px solid #fff;
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
    overflow:hidden;

}


ul li  {
    display:inline-block;
    margin-left:20px;
    border: 10px solid #fff;
    position: relative;
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
        position:absolute;
    }
    ul li, ul li div {
    height: 100px;
    width: 100px;
    background: #999;
    text-align: center;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    }
      ul li div {
    position:absolute;
    background: #000;
    color: #fff;
    top:0;
    left:0;
    display: none;
          }      
  
        ul li div span {
        position: relative;
        top: 30px;
        }

JavaScript

$('#logo').hover(function() {
    $('#vmenu').fadeIn();
    }, function() {
    $('#vmenu').fadeOut();
    });