JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
  
   <li>
 
   <a href="index.html">Home
    
   <img src="https://s2.coinmarketsum.com/i/coins/200x200/2099.png"></a>
   
   </li>
 
  
  </ul>

CSS

#nav
{width:200px;
height:60px;
list-style:none;
}
 
 #nav li
 {
     width:200px;
     height:60px;
     float:left;
     position:relative;
    
}
     
     #nav li a
     {
       text-decoration:none;
         width:200px;
         height:50px;
         background:#09F;
         color:#000;
         display:block;
         position:relative;
         margin:0;
         z-index:100;
        
         }
         
         #nav li a:hover
         {
             color:#fff;
             }
             
         #nav li .hover
         { width:200px;
         height:50px;
         background:#000;
         color:#0FF;
        display:none;
       background-position:0 0;
       position:absolute;
       top:0;
         margin:0;
         z-index:-1;
         opacity:0.9;
         
             }
img{
  max-height:40px;
  max-width:40px;
}

JavaScript

$(document).ready(function() {
    $('#nav li a').append('<div class="hover">');

    $('#nav li a').hover(function() {
        $('.hover').stop(true, true).slideDown('1000');

    },

    //Mouseout, fadeOut the hover class


    function() {

        $('.hover').stop(true, true).slideUp('1000');

    }).click(function() {

        //Add selected class if user clicked on it
        $(this).addClass('selected');


    });
});