Basic CSS only menu

No JS

by AsciiSmoke

HTML

<nav class="menu-container">
  <div class="top-menu">
    <a href="">Menu One</a>
    <nav class="sub-menu use-3-columns">
      <a href="">Sub Menu One</a>
      <a href="">Sub Menu Two</a>
      <a href="">Sub Menu Three</a>
      <a href="">Sub Menu Four</a>
      <a href="">Sub Menu Five</a>
      <a href="">Sub Menu Six</a>
      <a href="">Sub Menu Seven</a>
      <a href="">Sub Menu Eight</a>
      <a href="">Sub Menu Nine</a>
    </nav>
  </div>
  <div class="top-menu">
    <a href="">Menu One</a>
    <nav class="sub-menu use-2-columns">
      <a href="">Sub Menu One</a>
      <a href="">Sub Menu Two</a>
      <a href="">Sub Menu Three</a>
      <a href="">Sub Menu Four</a>
      <a href="">Sub Menu Five</a>
      <a href="">Sub Menu Six</a>
    </nav>
  </div>
  <div class="top-menu">
    <a href="">Menu Two</a>
    <nav class="sub-menu">
      <a href="">Sub Menu One</a>
      <a href="">Sub Menu Two</a>
      <a href="">Sub Menu Three</a>
    </nav>
  </div>
</nav>

CSS

.menu-container {
  transform: translateY(50%);
}

.sub-menu {
  display: none;
  margin-top: 20px;
}

.sub-menu a {
  display: block;
  margin: 5px 20px;
}

.sub-menu a:hover {
  background: #ccc;
}

.top-menu {
  position: relative;
  display: inline-block;
  padding: 40px;
  z-index: 1;
}

.top-menu:hover {
  background: red;
  z-index: 99;
}

.top-menu:hover > nav {
  position: absolute;
  display: block;
  background: #eee;
}

.use-3-columns {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-rule: 1px solid #dddddd;
  -moz-column-rule: 1px solid #dddddd;
  column-rule: 1px solid #dddddd;
}

.use-2-columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}