hover - jQuery SubMenu opportunity -

hover - jQuery SubMenu opportunity -

ive been workin on night no avail. typical submenu question , ive read lot of similar ones on here cant find fix.

i have menu unordered list. have submenu same. have menus positioned fine etc. problem when submenu appears side of regular menu, go hovering menu 1 menu 2, disappears. im sure simple somone take look?

<script> $(document).ready(function() { $('.nav').hover(function(e) { if(!$('.nav2').is(':visible')) { $('.nav2').fadein('slow'); } },function(){ if(!$('.nav2').is(':hover')) { $('.nav2').fadeout('slow'); } }); $('.nav2').mouseout(function(){ if(!$('.nav').is(':hover')) { $('.nav2').fadeout('slow'); } }); }); </script>

and lists are:

<div id="col1"> <ul class="nav"> <li><a href="http://www.alan.com">home</a></li> <li><a href="http://www.alan.com">about</a></li> <li><a href="http://www.alan.com">new listings</a></li> <li><a href="http://www.alan.com">featured home</a></li> <li><a href="http://www.alan.com">town facts</a></li> <li><a href="http://www.alan.com">contact me</a></li> </ul> <ul class="nav2"> <li><a href="http://www.alan.com">bio</a></li> <li><a href="http://www.alan.com">credentials</a></li> <li><a href="http://www.alan.com">education</a></li> </ul> </div>

nest submenu li on main menu. like:

<div id="col1"> <ul class="nav"> <li><a href="http://www.alan.com">home</a></li> <li><a href="http://www.alan.com">about</a> <ul class="nav2"> <li><a href="http://www.alan.com">bio</a></li> <li><a href="http://www.alan.com">credentials</a></li> <li><a href="http://www.alan.com">education</a></li> </ul> </li> <li><a href="http://www.alan.com">new listings</a></li> <li><a href="http://www.alan.com">featured home</a></li> <li><a href="http://www.alan.com">town facts</a></li> <li><a href="http://www.alan.com">contact me</a></li> </ul> </div>

edit: should give ideas. - jsfiddle demo

jquery hover submenu