Fly out menu (Microsoft style)

fly_menu.css

/* new menu */

.mainmenu{
  float: left;
  width: 100%;
  clear: both;
}

.mainmenu li.sf-depth-1 {
  display: inline-block;
}

.mainmenu ul.hover{
  display: block !important;
}

.sf-depth-1 ul{
  position: absolute;
  border: 1px solid #d8d8d8;
  background: #f8f8f8;
  border-radius: 0 4px 4px;
  display: none;
}

.sf-depth-1 > ul{
  width: 180px;
}

.sf-depth-2 > ul{
  position: absolute;
}

.sf-depth-2 > ul{
  top: 0;
  left: 180px;
}

fly_menu.js

// custom dropdown menu

$('html').click(function() {
  $('.mainmenu .sf-depth-1 ul:visible').slideUp(200);
  $.doTimeout( 200, function(){
      $('.mainmenu .sf-depth-1 > a.hover').removeClass('hover');
  });
});

// show dropdown on click

$('.mainmenu .sf-depth-1 > a').on('click',function(e) {
  var t = $(this),
      ul = t.parent().find('> ul');  
  e.preventDefault();
  e.stopPropagation();
  if (!t.hasClass('hover')){
    t.addClass('hover');  
  } else{
    $.doTimeout( 200, function(){
      t.removeClass('hover');  
    }); 
  }
  
  //$('.menu-block-3 > ul > li ul:visible').slideUp(200);
  t.parent().parent().find('> li > ul:visible').not(ul).slideUp(200);
  $.doTimeout( 200, function(){
      $('.mainmenu .sf-depth-1 > a.hover').not(t).removeClass('hover');
  });
  ul.slideToggle(300);
});

// disable click on 2nd level expanded links

$('.mainmenu .sf-depth-2 > a').on('click',function(e) {
  var t = $(this);  
  e.preventDefault();
  e.stopPropagation();
});

// show last dropdown on hover

$('.mainmenu .sf-depth-2.expanded > a').hover(
    function() {
      var t = $(this);  
      t.addClass('hover');
      t.parent().find('> ul').addClass('hover');
    }, function() {
      var t = $(this);  
      var ul = t.parent().find('> ul');
      $.doTimeout( 100, function(){
        if (!ul.hasClass('hovered')){
          t.removeClass('hover');
          ul.removeClass('hover');
        }
      });
    }
  );

$('.mainmenu .sf-depth-2 > ul').hover(
    function() {
      var t = $(this);  
      t.addClass('hovered');
    }, function() {
      var t = $(this);  
      t.removeClass('hovered hover');
      t.parent().find('> a').removeClass('hover');
    }
  );

fly_menu.php

function theme_menu_link__menu_block__4(array $variables) {

  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $element['#attributes']['class'][] = 'has-children';
    $sub_menu = drupal_render($element['#below']);
  }

  $depth_class = 'sf-depth-' . $element['#original_link']['depth'];
  $element['#attributes']['class'][] = $depth_class;

  //print dpr($element['#localized_options']);
  $element['#localized_options']['class'][] = $depth_class;
    $output = l($element['#title'], $element['#href'], $element['#localized_options']);
    return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
 
}