javascript - I just want to create simple menu links inside some divs? -

javascript - I just want to create simple menu links inside some divs? -

i want create simple menu links within animated divs , problems div disapper if mous move on (li) within if div empty works fine ?

first thing come mind have prevent event propagation , added elements within sum menu ( (li)) still face same problem.

class="snippet-code-js lang-js prettyprint-override">function hidemneu() { $('#submenu1').hide('fold', 'slow'); $('#submenu2').hide('fold', 'slow'); $('#submenu3').hide('fold', 'slow'); $('#submenu4').hide('fold', 'slow'); } $('#submenu1, #submenu2, #submenu3, #submenu4 ').on('mouseout', hidemneu); $('#btn1').on('mouseover', function() { hidemneu(); $('#submenu1').offset({ left: $('#btn1').offset().left }); $('#submenu1').show("fold"); }); $('#btn2').on('mouseover', function() { hidemneu(); $('#submenu2').offset({ left: $('#btn2').offset().left }); $('#submenu2').show("fold"); }); $('#btn3').on('mouseover', function() { hidemneu(); $('#submenu3').offset({ left: $('#btn3').offset().left }); $('#submenu3').show("fold"); }); $('#btn4').on('mouseover', function() { hidemneu(); $('#submenu4').offset({ left: $('#btn4').offset().left }); $('#submenu4').show("fold"); }); $("a").on('mouseover', function(event) { event.stoppropagation(); }); $("li").on('mouseover', function(event) { event.stoppropagation(); }); $("ul").on('mouseover', function(event) { event.stoppropagation(); }); class="snippet-code-css lang-css prettyprint-override">#btn1, #btn2, #btn3, #btn4 { display: inline-block; background-color: #ff8d73; width: 100px; outline: 1px dashed #000000; padding-right: 30px; } #menu-wrapper { width: 100%; background-color: #b7dcff; text-align: center; } #submenu1, #submenu2, #submenu3, #submenu4 { width: 300px; height: 200px; outline: 1px dashed #000000; float: left; left: 0; position: absolute; display: none; } #submenu1 { background-color: #f00700 } #submenu2 { background-color: #a6baf0 } #submenu3 { background-color: #7af044 } #submenu4 { background-color: #f0dc35 } #sub_wrapper:after { clear: both; } li, { outline: 1px dashed #000000; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <div id="menu-wrapper"> <div id='btn1'>button 1</div> <div id='btn2'>button 2</div> <div id='btn3'>button 3</div> <div id='btn4'>button 4</div> </div> <div id="sub_wrapper"> <div id="submenu1"> <ul> <li>option 1</li> <li>oprion 2</li> </ul> </div> <div id="submenu2"> <a href="#"> clcik me 1 </a> </div> <div id="submenu3"></div> <div id="submenu4"></div> </div>

changing line 8 of javascript seems trick:

from:

$('#submenu1, #submenu2, #submenu3, #submenu4 ').on('mouseout', hidemneu);

to

$('#submenu1, #submenu2, #submenu3, #submenu4 ').mouseleave(hidemneu);

class="snippet-code-js lang-js prettyprint-override">function hidemneu() { $('#submenu1').hide('fold', 'slow'); $('#submenu2').hide('fold', 'slow'); $('#submenu3').hide('fold', 'slow'); $('#submenu4').hide('fold', 'slow'); } $('#submenu1, #submenu2, #submenu3, #submenu4 ').mouseleave(hidemneu); $('#btn1').on('mouseover', function() { hidemneu(); $('#submenu1').offset({ left: $('#btn1').offset().left }); $('#submenu1').show("fold"); }); $('#btn2').on('mouseover', function() { hidemneu(); $('#submenu2').offset({ left: $('#btn2').offset().left }); $('#submenu2').show("fold"); }); $('#btn3').on('mouseover', function() { hidemneu(); $('#submenu3').offset({ left: $('#btn3').offset().left }); $('#submenu3').show("fold"); }); $('#btn4').on('mouseover', function() { hidemneu(); $('#submenu4').offset({ left: $('#btn4').offset().left }); $('#submenu4').show("fold"); }); $("a").on('mouseover', function(event) { event.stoppropagation(); }); $("li").on('mouseover', function(event) { event.stoppropagation(); }); $("ul").on('mouseover', function(event) { event.stoppropagation(); }); class="snippet-code-css lang-css prettyprint-override">#btn1, #btn2, #btn3, #btn4 { display: inline-block; background-color: #ff8d73; width: 100px; outline: 1px dashed #000000; padding-right: 30px; } #menu-wrapper { width: 100%; background-color: #b7dcff; text-align: center; } #submenu1, #submenu2, #submenu3, #submenu4 { width: 300px; height: 200px; outline: 1px dashed #000000; float: left; left: 0; position: absolute; display: none; } #submenu1 { background-color: #f00700 } #submenu2 { background-color: #a6baf0 } #submenu3 { background-color: #7af044 } #submenu4 { background-color: #f0dc35 } #sub_wrapper:after { clear: both; } li, { outline: 1px dashed #000000; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <div id="menu-wrapper"> <div id='btn1'>button 1</div> <div id='btn2'>button 2</div> <div id='btn3'>button 3</div> <div id='btn4'>button 4</div> </div> <div id="sub_wrapper"> <div id="submenu1"> <ul> <li>option 1</li> <li>oprion 2</li> </ul> </div> <div id="submenu2"> <a href="#"> clcik me 1 </a> </div> <div id="submenu3"></div> <div id="submenu4"></div> </div>

javascript jquery html css