Super Simple CSS Dropdown Menu

by R0drg3

HTML

<nav>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products &#x25BE;</a>
    <nav>
      <li><a href="#">Cameras</a></li>
      <li><a href="#">Televisions</a></li>
      <li><a href="#">Computers</a></li>
      <li><a href="#">Home Entertainment</a></li>
    </nav>
  </li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Cart</a></li>
</nav>

CSS

body {
  margin: 0;
}

nav {
  display: block;
  list-style-type: none;
  height: 40px;
  font: 400 14px/40px sans-serif;
}

nav li {
  display: block;
  float: left;
  position: relative;
}

nav li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 13px 10px;
  line-height: 14px;
  background-color: black;
  -webkit-transition: background-color 0.2s linear;
}

nav li a:hover {
  background-color: green;
  -webkit-transition: none;
}

nav nav {
  visibility: hidden;
  position: absolute;
  opacity: 0;
  -webkit-transition: all 0.25s linear;
  height: 0;
  margin-top: -10px;
}

nav nav li {
  float: none;
}

nav li:hover nav {
  margin-top: 0;
  visibility: visible;
  opacity: 1;
}