JSFiddle - React, Tailwind, and code Playground

HTML

<meta charset="UTF-8">
<title>Sol's page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src='menu.js'></script> <!-- выпадающее меню -->
<body>
     	<ul id='menu', class='menu'>
<!--  вкладка Main menu-->

    	 <li class='s' id='mainmenu'> <b>Main menu</b>
<!--  подменю первой вкладки-->
      	<ul id='subm', class='submenu'>
	  		<li><a href='http://google.com'> Open google</a></li>
	  		<li><p>sample text</p></li>
	  		</ul>     
<!--  подменю первой вкладки-->
       
       </li>     
<!--  вкладка Main menu-->

       <li class='s' id='mainmenu'><b>Sample menu block 2</b>
		   
         <ul id='subm' class='submenu'>
           <li><p> sample text 2</p></li>
       
         </ul>  
       </li> 
      </ul>     <!--  основное меню-->


 <div class="content">
	<div class="main">
	<p align='left'> This is an example site about Thai lady-boi's sellings.</p>
	</div>
</body>
</html>

CSS

<!DOCTYPE html>
<html>
<style>
body {
	background-color: #F5F5F5;
}
footer {
        position: absolute;
        width: 100%;
        height: 60px;
        left: 0;
        bottom: 0;
        background-color: #D3D3D3;
}

.menu {
  list-style: none;
  padding: 0;
  background-color: #B0C4DE;
  color: #33527B;
  border: 1px solid black;
}


.submenu {
	list-style: none;
	position: absolute;
	width: 110px;
  	padding: 0;
  	background-color: #B0C4DE;
  	color: #33527B;
}

.menu li { margin: 1px}
.menu .submenu {position: absolute; left: 8px}

li.s  {display: inline;}

</style>

JavaScript

$(function(){
$('ul.submenu').hide();
var submenu = $('#mainmenu ul')
$('#mainmenu').mouseenter(function(){
	submenu.fadeIn(700);
    });
$('#mainmenu').mouseleave(function(){
	submenu.fadeOut(700);
    });

});