JSFiddle - React, Tailwind, and code Playground

by buicu

HTML

<div id="othDiv">
    <div id="saveMeniu" >
      	<div id="saveBt" >Save</div>
        <div id="meniu1" >
            <div id="svList">To List 1</div>             
            <div id="svRec"> To list 2
                <ul>
                    <li>
                        <select>
                   	        <option>Opt1</option>
   	                        <option>Opt2</option>
                            <option>Opt3</option>
                        </select>
                    </li>
                    <li>li 1</li>
                    <li>li 2</li>
                    <li>li 3</li>
                </ul>
            </div>	
		</div>                   	
	</div>
</div>
<div id="container" >
    <div class="fdRow" ></div>
    <div class="fdRow" ></div>
</div

CSS

.fdRow {width:100%; height:30px; border:solid 1px blue;}
#othDiv #saveMeniu {display:none;}
#saveMeniu {
			position:absolute;
			left:0px;
			white-space:nowrap;
			z-index:98;
			cursor:default;}
 #saveBt {			
	width:40px;
	height:23px;
	color:#F30;
				}	
#meniu1, #meniu1 ul{
				display:none;
				position:absolute;		
				border:solid 1px #A2BFF0;
				background:#f9f9f9;
				opacity: 0.95;
				filter:alpha(opacity=95);
				}
			#meniu1 { 
				left:37px;
				top:0px;
				}
			#meniu1 ul{
				display:none;
				cursor:pointer;					
				left:71px;
				top:0px;
				overflow:auto;
				max-height:150px;
				max-width: 500px;
				}
				#svRec ul {top:20px;}
				#meniu1 div:hover,#meniu1 li:not(.inp):hover{background:#BFdFF0;}
				#meniu1 div, #meniu1 li { padding:5px 10px 5px 5px; }

JavaScript

var tim;
$('#container').on({
    mouseenter:function(){ 
		clearTimeout (tim); this.appendChild(document.getElementById('saveMeniu'));
    },
	mouseleave: function(){ 
    	tim=setTimeout(function(){$('#othDiv').append($('#saveMeniu'))},50);
  		}
	}, '.fdRow');

$('#saveMeniu').hover(function(){     
    $('#meniu1').toggle();
});

$('#svList, #svRec').hover(function(){ 
        $(this).children('ul').toggle();
});