CSS/JS needed for Dropdown menus in Admin Bar

dropdown.css

/* All dropdown list items */
#admin-bar .dropdown li {
  background-image: none;
  float: left; /* LTR */
  height: 100%;
  list-style-image: none;
  list-style-type: none;
  margin: 0 !important;
  padding: 0;
}
[dir="rtl"] #admin-bar .dropdown li {
  float: right;
}

/* First level items */
#admin-bar .dropdown li li {
  width: 160px; /* Required for Opera */
}
#admin-bar .dropdown li li li {
  filter: Alpha(opacity=100);
  opacity: 1;
}

/* Second-level lists */
/* Note: We must hide sub-lists or scrollbars might appear (display: none is not read by screen readers). */
#admin-bar .dropdown li ul {
  display: none;
  left: -999em; /* LTR */
  line-height: 1.2em;
  margin: 0;
  position: absolute;
  width: 160px;
}
[dir="rtl"] #admin-bar .dropdown li ul {
  left: auto;
  right: -999em;
}

/* Third-and-above-level lists */
#admin-bar .dropdown li li.expandable ul {
  margin: -32px 0 0 160px; /* LTR */
}
[dir="rtl"] #admin-bar .dropdown li li.expandable ul {
  margin-left: 160px;
  margin-right: 0;
}

/* Lists nested under hovered list items */
#admin-bar .dropdown ul.expanded {
  display: block;
  left: auto; /* LTR */
}
[dir="rtl"] #admin-bar .dropdown ul.expanded {
  right: auto;
}

/* Second-and-more-level hovering */
#admin-bar .dropdown li li.expandable > a {
  background: #45454A url(../images/arrow.png) no-repeat 145px center; /* LTR */
}
[dir="rtl"] #admin-bar .dropdown li li.expandable > a {
  background-image: url(../images/arrow-rtl.png);
  background-position: 5px center;
}
#admin-bar .dropdown li li a.expanded-trail {
  background-color: #111;
  border-color: #444;
  color: #EEE;
}

dropdown.js

/**
 * Apply JavaScript-based hovering behaviors.
 *
 * @todo This has to run last.  If another script registers additional behaviors
 *   it will not run last.
 */
Backdrop.adminBar.behaviors.hover = function (context, settings, $adminBar) {
  // Bind events for opening and closing menus on hover/click/touch.
  $adminBar.on('mouseenter', 'li.expandable', expandChild);
  $adminBar.on('mouseleave', 'li.expandable', closeChild);

  // On touch devices, the first click on an expandable link should not go to
  // that page, but a second click will. Use touch start/end events to target
  // these devices.
  var touchElement;
  var needsExpanding;
  $adminBar.on('touchstart touchend click', 'li.expandable > a, li.expandable > span', function(e) {
    // The touchstart event fires before all other events, including mouseenter,
    // allowing us to check the expanded state consistently across devices.
    if (e.type === 'touchstart') {
      touchElement = e.target;
      needsExpanding = $(this).siblings('ul').length > 0 && !$(this).siblings('ul').hasClass('expanded');
    }
    // If clicking on a not-yet-expanded item, expand it and suppress the click.
    if ((e.type === 'click' || e.type === 'touchend') && touchElement) {
      if (touchElement === e.target) {
        if (needsExpanding) {
          expandChild.apply($(this).parent()[0], [e]);
          e.preventDefault();
        }
        else if ($(this).is('span')) {
          closeChild.apply($(this).parent()[0], [e]);
        }
      }
      // If the touch ended on a different element than it started, suppress it.
      else if (touchElement !== e.target) {
        e.preventDefault();
      }
    }
  });

  // Close all menus if clicking outside the menu.
  $(document).bind('click', function (e) {
    if ($(e.target).closest($adminBar).length === 0) {
      $adminBar.find('ul').removeClass('expanded');
    }
  });

  function expandChild(e) {
    // Stop the timer.
    clearTimeout(this.sfTimer);

    // Display child lists.
    var $childList = $(this).children('ul');

    // Add classes for the expanded trail of links.
    $childList
      .parents('ul').addBack().addClass('expanded')
      .siblings('a, span').addClass('expanded-trail');
    // Immediately hide nephew lists.
    $childList.parent().siblings('li')
      .find('ul.expanded').removeClass('expanded').end()
      .find('.expanded-trail').removeClass('expanded-trail');
  }
  function closeChild(e) {
    // Start the timer.
    var $uls = $(this).find('> ul');
    var $link = $(this).find('> a, > span');
    this.sfTimer = setTimeout(function () {
      $uls.removeClass('expanded');
      $link.removeClass('expanded-trail');
    }, 400);
  }
};