Simple fly-out menu for a WordPress sidebar menu. Supports unlimited nesting.

gistfile1.html

<script>
jQuery(function() {
  if ('undefined' !== typeof submenuItems) {
    submenuItems.off();
  }
  if ('undefined' !== typeof primaryItems) {
    primaryItems.off();
  }
  if ('undefined' !== typeof sidebar) {
    sidebar.off();
  }
  var fadeSpd = 'fast';
  var sidebar = jQuery('#sidebar').find('ul.menu');
  var primaryItems = jQuery('#sidebar').find('ul.menu').children().children();
  var primaryLi = primaryItems.parent();
  var submenuItems = primaryLi.find('.sub-menu');
  primaryItems
      .on('click', function(e) {
            var t = jQuery(e.target);
            t.children('.sub-menu').fadeIn(fadeSpd);
          })
      .on('hover', function(e) {
            var t = jQuery(e.target).parent();
            t.children('.sub-menu').fadeIn(fadeSpd);
          })
      .on('mouseleave', function(e) {
            var t = jQuery(e.target).parent();
            setTimeout(function() {
              if (!t.children('.sub-menu').hasClass('active')) {
                t.children('.sub-menu').fadeOut(fadeSpd);
              }
            }, 50);
          });
  submenuItems
      .on('click', function(e) {
            jQuery(this).find('ul').fadeIn(fadeSpd);
          })
      .on('hover', function() {
            jQuery(this).addClass('active').find('ul').fadeIn(fadeSpd);
          })
      .on('mouseleave', function(e) {
            jQuery(this).removeClass('active').fadeOut(fadeSpd);
          });
});
</script>
<style>
#sidebar ul.sub-menu,
#sidebar ul.menu,
.gs-custom .widget-area h4 {
  background: rgba(0,0,0,.6) !important;
  box-sizing: border-box;
  border: 0;
}
.gs-custom .widget-area h4 {
  color: #fff;
}
#sidebar ul.menu li,
#sidebar ul.menu li a,
.gs-custom .widget-area h4 {
  margin: 0 !important;
  box-sizing: border-box !important;
  height: 36px !important;
  color: #fff !important;
  font: 16px/20px Lato !important;
  letter-spacing: 0 !important;
  padding: .5em !important;
  border: 0 !important;
  font-weight: 300 !important;
  border: 0 !important;
  background: none !important;
}
#sidebar ul.sub-menu {
  position: absolute;
  display: none;
  width: 140px;
  margin-left: -148px;
  margin-top: -28px;
  padding: 0;
  line-height: 1;
}
</style>