JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul id='menu', class='menu'>
<!-- вкладка Main menu-->
<li class='s', id='mainmenu1'> <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='mainmenu2'><b>Sample menu block 2</b>
<ul id='subm', class='submenu'>
<li><p> sample text 2</p></li>
<li><p> sample text 3</p></li>
<li><p> sample text 4</p></li>
</ul>
</li>
</ul> <!-- основное меню-->
CSS
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 {
display: none;
list-style: none;
width: 110px;
padding: 0;
background-color: #B0C4DE;
color: #33527B;
}
.menu li { margin: 1px}
li.s {display: inline;}
JavaScript
$(function(){
$('#mainmenu1').mouseenter(function(){
$('#mainmenu1 ul').css({
position:'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex:1000
});
$('#mainmenu1 ul').fadeIn(700);
});
($('#mainmenu1 ul') && $('#mainmenu1')).mouseleave(function(){
$('#mainmenu1 ul').fadeOut(700);
});
$('#mainmenu2').mouseenter(function(){
$('#mainmenu2 ul').css({
position:'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex:1000 });
$('#mainmenu2 ul').fadeIn(700);
});
($('#mainmenu2 ul') && $('#mainmenu2')).mouseleave(function(){
$('#mainmenu2 ul').fadeOut(700);
});
});