<ul class="menubar">
  <li class="menubar-item">
    <a class="menubar-item-target" href="javascript:void(0)">File</a>
    <ul class="menu">
      <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Open</a></li>
      <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Save</a></li>
      <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Save as&#8230;</a></li>
      <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Close</a></li>
      <li class="menu-separator"></li>
      <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Exit</a></li>
    </ul>
  </li>
  <li class="menubar-item">
    <a class="menubar-item-target" href="javascript:void(0)">Edit</a>
    <ul class="menu">
      <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Cut</a></li>
      <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Copy</a></li>
      <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Paste</a></li>
    </ul>
  </li>
  <li class="menubar-item">
    <a class="menubar-item-target" href="javascript:void(0)">Help</a>
    <ul class="menu">
      <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">About</a></li>
    </ul>
  </li>
</ul>

<div class="bubble">
  <div class="bubble-tail"></div>
  <div class="bubble-content">
  Click on the menubar to get started.
  </div>
</div>

@import "compass/css3";

@import "compass";

@include global-reset;

body {
  font-family: sans-serif;
  font-weight: 100;
  background: #eee;
}

.menubar {
  list-style: none;
  font-size: 14px;
  background: white;
  @include box-shadow(rgba(black, 0.2) 0 1px 1px);
  padding: 0 10px;
}
.menubar-item {
  display: inline-block;
  position: relative;
}
.menubar-item-target {
  color: black;
  display: block;
  padding: 10px 14px;
  text-decoration: none;
    
  &:hover, .is-selected & {
    background: #29a7f5;
    color: white;
  }
}

.menu {
  @include box-shadow(rgba(black, 0.5) 0 5px 15px);
  @include border-radius(3px);
  @include border-top-left-radius(0);
  display: none;
  position: absolute;
  top: 100%;
  background: white;
  list-style: none;
  width: 15em;
  padding: 10px 0;
  
  .is-selected & { display: block; }
}
.menu-item-target {
  color: black;
  display: block;
  padding: 8px 20px;
  text-decoration: none;
        
  &:hover {
    background: #29a7f5;
    color: white;
  }
}   
.menu-separator {
  border-top: 1px solid #ddd;
  margin: 8px;
}

.bubble {
  margin: 10px;
  position: absolute;
}
.bubble-content {
  background: black;
  background: rgba(black, 0.8);
  color: white;
  color: rgba(white, 0.9);
  padding: 15px;
  @include border-radius(25px);
}
.bubble-tail {
  border: 10px solid transparent;
  border-top: none;
  border-bottom-color: black;
  border-bottom-color: rgba(black, 0.8);
  width: 0;
  position: relative;
  left: 50%;
  margin-left: -10px;
}

var Menubar = {};

Menubar.active = false;

Menubar.open = function(el) {
  var menubar = $(el).closest('.menubar')
  ,   item = $(el).closest('.menubar-item')
  ,   menu = item.find('.menu').first()
  ;
  Menubar.active = true;
  item.addClass('is-selected')
  item.siblings().removeClass('is-selected');
  $('.bubble').hide();
};

Menubar.close = function() {
  $('.menubar-item.is-selected').removeClass('is-selected');
  Menubar.active = false;
};

$('.menubar-item').on('click', function(e) {
  if (!Menubar.active) {
    Menubar.open(this);
    e.stopPropagation(); // Keep document.click from firing
  }
});

$('.menubar-item').on('mouseenter', function() {
  if (Menubar.active) { Menubar.open(this); }
});

$(document).on('click', function() {
  Menubar.close();
});