kode lengkap styles.css dengan efek lembut di menu dropdown sederhana

styles.css

nav a:hover {
  text-decoration: none;
}
nav ul {
  list-style: none;
}
nav ul li {
  float: left;
  padding: 5px 20px;
}
nav ul li:hover {
  background-color: #2980b9;
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}
nav ul li ul {
  display: none;
  list-style: none;
  margin-left: -20px;
}
nav ul li ul li {
  float: none;
  padding: 5px 20px;
  margin-left: -40px;
}
nav ul li ul li:hover {
  background-color: #2980b9;
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}
nav ul li:hover > ul {
  display: block;
  position: absolute;
  background: #ddd;
}
nav ul li:hover > a {
  color: #fff;
}