<div id="myList">
  <span>SELECT</span>
  <ul>
    <li><a href="#">Chrome</a></li>
    <li><a href="#">Firefox</a></li>
    <li><a href="#">Internet Explorer</a></li>
    <li><a href="#">Opera</a></li>
    <li><a href="#">Safari</a></li>
  </ul>
</div>

  	html, body{
			min-height: 100%;
		}

		body{
			background-color: #B5BECF;
			background-image: -ms-radial-gradient(center, ellipse cover, #B5BECF 0%, #78849A 100%);
			background-image: -moz-radial-gradient(center, ellipse cover, #B5BECF 0%, #78849A 100%);
			background-image: -o-radial-gradient(center, ellipse cover, #B5BECF 0%, #78849A 100%);
			background-image: -webkit-gradient(radial, center center, 0, center center, 140, color-stop(0, #B5BECF), color-stop(1, #78849A));
			background-image: -webkit-radial-gradient(center, ellipse cover, #B5BECF 0%, #78849A 100%);
			background-image: radial-gradient(ellipse cover at center, #B5BECF 0%, #78849A 100%);
			font: 16px "Lucida Grande", Tahoma, Verdana, sans-serif;
			letter-spacing: .5px;		
		}

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

		a{
			text-decoration: none;
		}


		/* DropDown */

		#myList{
			width:300px;
			margin:100px auto;
		}

		li{	
			display: none;		
			position: relative;
		}

		a{
			background-color: #f8f8f8;
			border-top: 1px solid #fff;
			border-bottom: 1px solid #e2e2e2;
			box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .4);
			color:#666;
			display: block;
			padding: 15px;
			-webkit-transition: color .2s linear, padding .2s linear;
			   -moz-transition: color .2s linear, padding .2s linear;
			     -o-transition: color .2s linear, padding .2s linear;
			   		transition: color .2s linear, padding .2s linear;
		}

		a:hover{
			background-color: #f0f0f0;
			color: #0088cc;
			padding-left: 30px;
		}


		span{
			background-color: #f8f8f8;
			border-top: 1px solid #fff;
			border-bottom: 1px solid #e2e2e2;
			box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .4);
			color:#666;
			cursor: pointer;
			display: block;
			padding: 15px;
			position: relative;
			font-weight: bold;
			padding-left: 15px !important;
		}


		span:after{
			content: "\25BC";
			position: absolute;
			right: 15px;
			top:15px;
		}

		.expand ul{
			height: auto;
		}

		.expand li{
			display: block;

			-webkit-animation: expandAll .2s ease both;
			   -moz-animation: expandAll .2s ease both;
		     	 -o-animation: expandAll .2s ease both;
		     		animation: expandAll .2s ease both;

			-webkit-animation-play-state: running;
			   -moz-animation-play-state: running;
			     -o-animation-play-state: running;
			   		animation-play-state: running;

		    -webkit-transform-origin: 50% 0%;
		       -moz-transform-origin: 50% 0%;
		         -o-transform-origin: 50% 0%;
		            transform-origin: 50% 0%;
		}

		.expand span, span:hover{
			color: #0088cc;
		}

		.expand span:after{
			content: "\25B2";
			position: absolute;
			right: 15px;
			top:15px;
		}

		.collapse li{
			display: block;

			-webkit-animation: collapseAll .2s ease both;
			   -moz-animation: collapseAll .2s ease both;
			     -o-animation: collapseAll .2s ease both;
			     	animation: collapseAll .2s ease both;

			-webkit-animation-play-state: running;
			   -moz-animation-play-state: running;
			     -o-animation-play-state: running;
			   		animation-play-state: running;

		    -webkit-transform-origin: 50% 0%;
		       -moz-transform-origin: 50% 0%;
		         -o-transform-origin: 50% 0%;
		            transform-origin: 50% 0%;			   		
		}



		/* Keyframes */ 

		@-webkit-keyframes collapseAll {
		    0% { -webkit-transform: perspective(300px) rotateX(0deg); }
		    100% { -webkit-transform: perspective(300px) rotateX(-90deg); }
		}

		@-webkit-keyframes expandAll {
		    0% { -webkit-transform: perspective(300px) rotateX(-90deg); }
		    100% { -webkit-transform: perspective(300px) rotateX(0deg); }
		}


		@-moz-keyframes collapseAll {
		    0% { -moz-transform: perspective(300px) rotateX(0deg); }
		    100% { -moz-transform: perspective(300px) rotateX(-90deg); }
		}

		@-moz-keyframes expandAll {
		    0% { -moz-transform: perspective(300px) rotateX(-90deg); }
		    100% { -moz-transform: perspective(300px) rotateX(0deg); }
		}

		@-o-keyframes collapseAll {
		    0% { -o-transform: perspective(300px) rotateX(0deg); }
		    100% { -o-transform: perspective(300px) rotateX(-90deg); }
		}

		@-o-keyframes expandAll {
		    0% { -o-transform: perspective(300px) rotateX(-90deg); }
		    100% { -o-transform: perspective(300px) rotateX(0deg); }
		}

		@keyframes collapseAll {
		    0% { transform: perspective(300px) rotateX(0deg); }
		    100% { transform: perspective(300px) rotateX(-90deg); }
		}

		@keyframes expandAll {
		    0% { transform: perspective(300px) rotateX(-90deg); }
		    100% { transform: perspective(300px) rotateX(0deg); }
		}
/*

  Tested on Win7 with Chrome, Firefox and Safari.
  
  Inspired by Mary Lou's work on Codrops:
  https://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/


*/

$(function(){
  			
				var list 		= $("#myList"),
					listItem	= $("> ul li",list),
					listCount	= listItem.length;
					
				function expand(){
					listItem.each(function(i){
						$(this).attr("style", "z-index:"+i+";"
							+ "-webkit-animation-delay:" + i * 100 + "ms;"
							   + "-moz-animation-delay:" + i * 100 + "ms;"
							     + "-o-animation-delay:" + i * 100 + "ms;"
							        + "animation-delay:" + i * 100 + "ms;");
				    });
					list.removeClass("collapse").addClass("expand");
				}

				function collapse(){
					listItem.each(function(i){
						i++;
						$(this).attr("style", "z-index:"+i+";"
							+ "-webkit-animation-delay:" + (listCount-i) * 100 + "ms;"
							   + "-moz-animation-delay:" + (listCount-i) * 100 + "ms;"
							     + "-o-animation-delay:" + (listCount-i) * 100 + "ms;"
							        + "animation-delay:" + (listCount-i) * 100 + "ms;");
				    });
					list.removeClass("expand").addClass("collapse");
				}

				$("span").bind("click", function(){
					if (list.hasClass("expand")) {
						collapse();
					}else{
						expand();
					}
				});
				
			});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js