JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a11">
        <a class="menu1" href="#">GALAXY 11</a>
</div>    
<div id="submenu11">
    <div id="left1">
      <ul class="nav1">   
       <li class="submenulist"><a class="submenulink1" href="#">GALAXY S6 Edge</a></li>
       <li class="submenulist"><a class="submenulink1" href="#">GALAXY S6</a></li>
       <li class="submenulist"><a class="submenulink1" href="#">GALAXY S5</a></li>
       <li class="submenulist"><a class="submenulink1" href="#">GALAXY S4 Mini</a></li>
       <li class="submenulist"><a class="submenulink1" href="#">GALAXY S3 Mini VE</a></li>
      </ul>  
    </div>
          <div id="right1">
             <img src="http://www.samsung.com/uk/next/img/estore-recommend-images/mobiles/S6edgegreen.jpg" alt=""></img>
             <a href="#">GALAXY S6 Edge information</a>
          </div>    
</div>

CSS

#submenu11{
    display: none;
}

JavaScript

$(document).ready(function(){
     $("#a11").mouseover(function(){
        
         $("#submenu11").show();
     });
    $("#a11").mouseout(function(){
       
         $("#submenu11").hide();
     });
});