Pure CSS Dropdown

A pure css dropdown menu

by Carson Evans

HTML

<nav>
  <ul class="navbar clearfix">
    <li><a href="#">Home</a></li>
    <li class="dropdown">
      <a href="#">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
    <li class="dropdown">
      <a href="#">Dropdown2</a>
      <ul class="dropdown-menu">
        <li class="dropdown">
          <a href="#">Dropdown level 2</a>
          <ul class="dropdown-menu">
            <li><a href="#">This is cool</a></li>
            <li><a href="#">This is awesome</a></li>
            <li><a href="#">This is slick</a></li>
            <li><a href="#">This is sweet</a></li>
          </ul>
        </li>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>
        <li><a href="#">Pellentesque</a></li>
        <li><a href="#">Welcome to the place</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

body {
  margin: 0;
  font-family: Helvetica;
  background-color: #fff;
}

a {
  text-decoration: none;
}

nav {
  height: 50px;
}

.navbar {
  background-color: #222;
}

.navbar,
.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar>li>a {
  display: block;
  color: #fff;
}

.navbar > li {
  float: left;
}

.navbar > li > a {
  padding: 15px;
}

.dropdown {
  position: relative;
}

.dropdown:hover > .dropdown-menu {
  display: block;
}

.dropdown-menu {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  min-width: 150px;
  white-space: nowrap;
}

.dropdown-menu > li {
  border-right: 1px solid #222;
  border-left: 1px solid #222;
}

.dropdown-menu > li:hover {
  background-color: #f5f5f5;
}

.dropdown-menu > .dropdown:hover {
  border-right: none;
}

.dropdown-menu > li:last-of-type {
  border-bottom: 1px solid #222;
  border-radius: 0 0 6px 6px;
}

.dropdown-menu > li,
.dropdown-menu > li > a {
   display: block;
}

.dropdown-menu > li > a {
  padding: 5px 15px;
  color: #333;
}

.dropdown-menu .dropdown-menu {
  position: absolute;
  top: -5%;
  left: 100%;
  margin-left: -1px;
  border-top: 1px solid #222;
  background-color: #f5f5f5;
  border-radius: 0 0 6px 6px;
}

.dropdown-menu .dropdown-menu > li:hover {
  background-color: #fff;
}

.dropdown-menu .dropdown-menu > li:first-of-type {
  border-left: none;
}

.clearfix:after {
  display: table;
  content: '';
  clear: both;
}