<ul class="menubar">
  <li>
    <a href="#">Dosya</a>
    <ul>
      <li><a href="#">Aç</a></li>
      <li><a href="#">Kaydet</a></li>
      <li><a href="#">Farklı Kaydet&#8230;</a></li>
      <li><a href="#">Kapat</a></li>
      <li class="separator"></li>
      <li><a href="#">Çıkış</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Düzenle</a>
    <ul>
      <li><a href="#">Kes</a></li>
      <li><a href="#">Kopyala</a></li>
      <li><a href="#">Yapıştır</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Yardım</a>
    <ul>
      <li><a href="#">Hakkında</a></li>
    </ul>
  </li>
</ul>
@import "compass/css3";

@import "compass";

@include global-reset;

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

ul.menubar {
  background: white;
  @include box-shadow(rgba(black, 0.2) 0 1px 1px);
  list-style: none;
  font-size: 14px;
  padding: 0 10px;
  
  > li {
    display: inline-block;
    position: relative;
    
    > a {
      color: black;
      display: block;
      padding: 10px 14px;
      text-decoration: none;
    
      &:hover {
        background: #29a7f5;
        color: white;
      }
    }
    
    > ul {
      @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;
      
      > li > a {
        color: black;
        display: block;
        padding: 8px 20px;
        text-decoration: none;
        
        &:hover {
          background: #29a7f5;
          color: white;
        }
      }
      
      > li.separator {
        border-top: 1px solid #ddd;
        margin: 8px;
      }
    }
    
    &.is-selected {
      > a {
        background: #29a7f5;
        color: white;
      }
      
      > ul { display: block; }
    }
  }
}
View Compiled
var Menubar = {};

Menubar.active = false;

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

Menubar.close = function() {
  console.log('close');
  $('.menubar > li.is-selected').removeClass('is-selected');
  Menubar.active = false;
};

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

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

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js