Nice menu from Dribble

dabblet.css

body{
background: #EDECE8 url("http://www.codedevelopr.com/assets/images/bg.png") repeat;
}


.tranparent {
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.4;           /* fx, safari, opera */
	}

#box{
width:300px;
height:300px;
background:#000000;
}



#borders {
   position:relative;
   z-index:1;
   padding:30px;
   border:5px solid #f00;
   background:#ff9600;
}



#borders:before {
   content:"";
   position:absolute;
   z-index:-1;
   top:5px;
   left:5px;
   right:5px;
   bottom:5px;
   border:5px solid #ffea00;
   background:#4aa929;
}
 
#borders:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:15px;
   left:15px;
   right:15px;
   bottom:15px;
   border:5px solid #00b4ff;
   background:#fff;
}






ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }


ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }



ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }


ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }



















/**
 * Nice menu from Dribble 
 * http://dribbble.com/shots/720647-Account-Dropdown-Menu
 */

#list{
	list-style-type: none;
	background: #f2f1ed;
	width:280px;
	
	border: 1px solid #d1c8c9;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-shadow: 0em 0.1em #f8f7f5;
	
	/*chrome was acting weird unless I added this in for some reason*/
	-webkit-margin-before: 0em;
	-webkit-margin-after: 0em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 0px;
}

ul#list li{	
	border-top: 1px solid #fefefe;
	border-bottom: 1px solid #d3d3d1;
	padding: 0px 0px 0px 25px;
	margin: 0px 0px 0px 0px;
	line-height: 34px;
	color: #504f4d;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;
	text-align:left
	text-shadow: 0.1em 0.1em #fff;
}

ul#list li:hover{
	background: #e2dedb;
	border-top: 1px solid #c9c8c4;
}

.number{
	background: #ee6c1e;
	padding: 1px 8px 1px 8px;
	margin: 0px 0px 0px 10px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	color: #ffffff;
	border-top: 1px solid #b65318;
	border-bottom: 1px solid #f8f7f5;
	font-size: 12px;
}

dabblet.html

<div id="borders" class="tranparent">
Testing

</div>




<ul class="box">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>














<ul id="list">
	<li>My Profile</li>
	<li>Account Information</li>
	<li>Credits <span class="number">25</span></li>
	<li>Orders</li>
	<li>Refer a Trainer/Expert</li>
	<li>Invite Friends</li>
</ul>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}