LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
.sub-menu-parent {
  position: relative;
}
.sub-menu {
  visibility: hidden;
  /* hides sub-menu */
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform: translateY(-2em);
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
.sub-menu-parent:hover .sub-menu {
  visibility: visible;
  /* shows sub-menu */
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
  /* this removes the transition delay so the menu will be visible while the other styles transition */
}
/* presentational */
body {
  padding: 2%;
  font: 18px/1.4 sans-serif;
}
nav a {
  color: #E00;
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
}
nav a:hover {
  color: #F55;
}
nav ul,
nav ul li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
nav > ul {
  background: #EEE;
  text-align: center;
}
nav > ul > li {
  display: inline-block;
  border-left: solid 1px #aaa;
}
nav > ul > li:first-child {
  border-left: none;
}
.sub-menu {
  background: #DDD;
}
Host Instantly Drag and Drop Website Builder

 

Description

Example for http://stackoverflow.com/questions/20098447/css-only-drop-down-menu-css3-transition
Term
Mon, 11/27/2017 - 22:04

Related Codes

Pen ID
Pen ID
Pen ID