A CodePen by Brady Sammons. CSS3 Card Deck Drop Down - This is a UI concept i have seen before but i felt there was a few things that could be done different. Ao here is my version of a Card Deck style dropdown, using CSS3 transitions and jQuery.

index.html

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<div id="wrapper">
  <h1><i class='icon-sort-by-attributes'></i> CSS3 <span>Card Deck Drop Down</span></h1>
			<div class="card-drop">
				<a class='toggle' href="#">
					<i class='icon-suitcase'></i> 
					<span class='label-active'>Everyting</span>
				</a>
				<ul>
					<li class='active'>
						<a data-label="Everyting" href="#"><i class='icon-suitcase'></i> Everyting</a>
					</li>
					<li>
						<a data-label="Design" href="#"><i class='icon-magic'></i> Design</a>
					</li>
					<li >
						<a data-label="UI-UX" href="#"><i class='icon-bolt'></i> UI-UX</a>
					</li>
					<li>
						<a data-label="Print" href="#"><i class='icon-tint'></i> Print</a>
					</li>
					<li>
						<a data-label="Photography" href="#"><i class='icon-camera-retro'></i> Phtography</a>
					</li>

				</ul>
			</div>
		</div>

script.js

(function($){
  //Author: Brady Sammons
  //URL: www.bradysammons.com
	/* -------------------------------------------------------- */ 
	/*	//set Global variables
	/* -------------------------------------------------------- */ 
	var cards = $(".card-drop"),
		toggler = cards.find(".toggle"),
		links = cards.find("ul>li>a"),
		li = links.parent('li'),
		count = links.length,
		width = links.outerWidth();

		//set z-Index of drop Items
		links.parent("li").each(function(i){
			$(this).css("z-index" , count - i); //invert the index values
		});

		//set top margins & widths of li elements
		function setClosed(){
			li.each(function(index){
				 $(this).css("top" , index *2)
				 		.css("width" , width - index *2)
				 		.css("margin-left" , (index*2)/2);
			});
			li.addClass('closed');
			toggler.removeClass("active");
		}
		setClosed();

	/* -------------------------------------------------------- */ 
	/*	Toggler Click handler
	/* -------------------------------------------------------- */ 
	toggler.on("mousedown" , function(){
		var $this = $(this); //cache $(this)
		//if the menu is active:
		if($this.is(".active")){
			setClosed();
		}else{
			//if the menu is un-active:
			$this.addClass("active");
			li.removeClass('closed');
			//set top margins
			li.each(function(index){
				 $(this).css("top" , 60 * (index + 1))
				 		.css("width" , "100%")
				 		.css("margin-left" , "0px");
			});
		}
	});

	/* -------------------------------------------------------- */ 
	/*	Links Click handler
	/* -------------------------------------------------------- */ 
	links.on("click" , function(e){
		var $this = $(this),
			label = $this.data("label");
			icon = $this.children("i").attr("class");
			
			li.removeClass('active');
		if($this.parent("li").is("active")){
			$this.parent('li').removeClass("active");
		}else{
			$this.parent("li").addClass("active");
		}
		toggler.children("span").text(label);
		toggler.children("i").removeClass().addClass(icon);
		setClosed();
		e.preventDefault;
	});

})(jQuery);

style.scss

@import "compass";
//Author: Brady Sammons
//URL: www.bradysammons.com
@import "compass/reset";
@import "compass/css3";

//!!Change Color & size Here:
$primary:#5F8181;
$width:300px;
$border:darken($primary, 8%);

body{
	background-color: #F2EFE9;
  overflow:hidden;
	padding-top:40px;
	font-family: helvetica, arial, sans-serif;
	font-size: 1em;
}
*{
	@include box-sizing(border-box);
}
#wrapper{
	width: 680px;
	margin: 0 auto;
}
h1{
	font-size:2.5em;
	text-align: center;
	font-weight: bold;
	margin-bottom:10px;
	line-height: 1.4em;
	color: darken($primary, 8%);
	text-shadow:0 1px 0 rgba(255,255,255,.8);
	font-family:helvetica, arial, sans-serif;
	span{
		font-weight: lighter;
	}
}

.card-drop{
	max-width: $width;
	position: relative;
	margin: 0 auto;
	@include perspective(800px);
	a{
		display: block;
		width: 100%;
		background-color: salmon;
		padding:20px 0 20px 20px;
		height: 60px;
		text-decoration: none;
		color: darken($primary, 30%);
		background-color: $primary;
		border-bottom: 1px solid $border;
		@include transition(all .3s ease-out );
		i{
			display: inline-block;
			width: 20px;
		}
	}
	>a.toggle{
		position: relative;
		z-index: 300;
		@include backface-visibility(hidden);
		@include transform-style(preserve-3d);
		@include transform-origin(50%, 0%);
		@include transition(.1s linear);
		background-color: lighten($primary, 8%);
		&:active{
			 @include rotateX(60deg);
		}
		&.active{
			&:before{
			 	content: "\f0d8";
			 }
		}

		&:before{
			font-family: 'FontAwesome';
			content: '\f0d7';
			font-size: 1.3em;
			color: darken($primary, 20%);
			text-shadow:0 1px 0 rgba(255,255,255,.3);
			position: absolute;
			right: 0;
			top: 0;
			height: 59px;
			line-height: 60px;
			width: 60px;
			text-align: center;
			display: block;
			border-left: 1px solid $border;
		}
	}
	ul{
		position: absolute;
		height: 100%;
		top: 0;
		display: block;
		width: 100%;
		li{
			margin: 0 auto;
			@include transition(all, .3s ease-out);
			position: absolute;
			top: 0;
			z-index: 0;
			width:100%;
      a:hover{
			  background-color: lighten($primary, 5%);
			  color: lighten($primary, 44%);
		  }
			&.active{
				a{
					color: lighten($primary, 20%);
					background-color: darken($primary, 5%);
					cursor: default;
				}
			}
			&.closed{
				a:hover{
					cursor: default;
					background-color: $primary;
				}
			}
		}
	}
}