Simple DropDown Menu

Simple DropDown Menu With CSS Transition

by sarkem

HTML

<ul id="pagenav">
      <li>
        <a href="#">Menu 1</a>
        <ul>
          <li><a href="#">Menu 1a</a></li>
          <li><a href="#">Menu 1b</a></li>
          <li><a href="#">Menu 1c</a></li>
          <li>
            <a href="#">Menu 1d</a>
        <ul>
          <li><a href="#">Menu 1-2a</a></li>
          <li><a href="#">Menu 1-2b</a></li>
          <li><a href="#">Menu 1-3c</a></li>
          <li><a href="#">Menu 1-4d</a></li>
        </ul>
           </li>
        </ul>
        </li>
				<li>
        <a href="#">Menu 2</a>
        <ul>
          <li><a href="#">Menu 2a</a></li>
          <li><a href="#">Menu 2b</a></li>
          <li><a href="#">Menu 3c</a></li>
          <li><a href="#">Menu 4d</a></li>
        </ul>
        </li>
				<li><a href="#">Menu 3</a></li>
				<li><a href="#">Menu 4</a></li>
			</ul>

CSS

#pagenav{
  width:100%;
  display:block;
  position:relative;
}
#pagenav li{
	float:left;
	display:block;
	position:relative;
	padding:10px 15px;
	font-weight:bold;
}
#pagenav li{
	background:#FFF;
}
#pagemenu li a{
	font-family:"Open Sans Condensed", Helvetica, Arial, sans-serif;
	color:#01ACE2;
	display:block;
	text-shadow:1px 1px 0 #FFF;
}
#pagenav li ul, #pagenav li ul li ul{
  width:150px;
  position:absolute;
  top:100%;
  left:0;
	opacity:0;
  padding:0;
	transform:translateZ(0);
	transform:translateY(10%);
	transition:all 0.5s ease 0s,visibility 0s linear 0.5s;
	-webkit-transition:all 0.5s ease 0s,visibility 0s linear 0.5s;
	visibility:hidden;
	z-index:100;
}
#pagenav li ul li ul{
  top:0;
  left:100%;
  opacity:0;
	transform:translateZ(0);
	transform:translateY(10%);
	transition:all 0.5s ease 0s,visibility 0s linear 0.5s;
	-webkit-transition:all 0.5s ease 0s,visibility 0s linear 0.5s;
	visibility:hidden;
	z-index:100;
}
#pagenav li:hover ul{
	opacity:1;
	transform:translateX(0%);
	transition-delay:0s;
	visibility:visible;
	display:block;
}
#pagenav li:hover ul li ul{
  opacity:0;
	transform:translateZ(0);
	transform:translateY(10%);
	transition:all 0.5s ease 0s,visibility 0s linear 0.5s;
	-webkit-transition:all 0.5s ease 0s,visibility 0s linear 0.5s;
	visibility:hidden;
	z-index:100;
}
#pagenav li ul li:hover ul{
	opacity:1;
	transform:translateX(0%);
	transition-delay:0s;
	visibility:visible;
	display:block;
}