Horizontally centred CSS dropdown menu

A CSS-only dropdown menu that is positioned horizontally central relative to its control without knowing the width of the content.

by [Twiner]

HTML

<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...

CSS

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

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

.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;
}