Edit in JSFiddle

<ul class="nav-bar">
  <li><a href="">Home</a></li>
  <li class="dropdown">
    <a href="#dropdown-1" class="dropdown__toggle">Mobile Devices</a>
    <div class="dropdown__panel" id="dropdown-1">
      <div class="dropdown__panel__wrapper">
        <div class="dropdown__panel__content">
          <div class="dropdown__panel__content__column">
            <h6 class="dropdown__panel__content__heading">
              Apple iOS
            </h6>
            <ul class="dropdown__panel__content__menu">
              <li><a href="">iPhone 5S</a></li>
              <li><a href="">iPhone 5C</a></li>
              <li><a href="">iPad Air</a></li>
              <li><a href="">iPad mini</a></li>
            </ul>
          </div>
          <div class="dropdown__panel__content__column">
            <h6 class="dropdown__panel__content__heading">
              Android
            </h6>
            <ul class="dropdown__panel__content__menu">
              <li><a href="">Nexus 5</a></li>
              <li><a href="">Nexus 7</a></li>
              <li><a href="">Galaxy S4</a></li>
              <li><a href="">Galaxy Note</a></li>
            </ul>
          </div>
          <div class="dropdown__panel__content__column">
            <h6 class="dropdown__panel__content__heading">
              Windows Phone
            </h6>
            <ul class="dropdown__panel__content__menu">
              <li><a href="">Nokia Lumia 1020</a></li>
              <li><a href="">Nokia Lumia 720</a></li>
              <li><a href="">Nokia Lumia 625</a></li>
              <li><a href="">Nokia Lumia 520</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="dropdown">
    <a href="#dropdown-2" class="dropdown__toggle">About</a>
    <div class="dropdown__panel" id="dropdown-2">
      <div class="dropdown__panel__wrapper">
        <div class="dropdown__panel__content">
          <div class="dropdown__panel__content__column">
            <ul class="dropdown__panel__content__menu">
              <li><a href="">History</a></li>
              <li><a href="">Careers</a></li>
              <li><a href="">Offices</a></li>
              <li><a href="">Press</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li><a href="">Contact</a></li>
</ul>

body {
  font: normal 16px/1.5 Arial, sans-serif;
}

/* Navigation bar */
.nav-bar {
  margin: 0;
  padding: 0;
  text-align: center;
}

.nav-bar > li {
  display: inline;
}

.nav-bar > li > a {
  display: inline-block;
  padding: 5px 10px;
  text-decoration: none;
}

/* Dropdown */
.dropdown {
  position: relative;
  padding-bottom: 15px;
}

.dropdown__toggle:after {
    content: ' ↓';
}

.dropdown__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  display: none;
  z-index: 100;
}

.dropdown:hover > .dropdown__panel {
  display: block;
}

.dropdown__panel__wrapper {
  position: relative;
  left: -50%;
  text-align: left;
}

.dropdown__panel__content {
  position: relative;
  display: table;
  border-collapse: collapse;
  background: #FFF;
  border: 1px solid #DDD;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .1);
}

.dropdown__panel__content:before,
.dropdown__panel__content:after {
  content: ' ';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: -1px;
}

.dropdown__panel__content:before {
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom-color: #ccc;
}

.dropdown__panel__content:after {
  margin-left: -14px;
  border: 14px solid transparent;
  border-bottom-color: #fff;
}

.dropdown__panel__content__column {
  display: table-cell;
  min-width: 140px;
  padding: 10px;
}

.dropdown__panel__content__heading {
  margin: 0 0 10px;
  font-size: 100%;
}

.dropdown__panel__content__menu {
  padding: 0;
  margin: 0;
  list-style: none;
}