DEMO Simple Vertical menu
by Imron Fhatoni
HTML
<center>
<div class="menuzoomout">
<ul>
<li><a href="http://informasibloger.blogspot.com/">Mayung</a></li>
<li><a href="http://informasibloger.blogspot.com/">Kebo</a></li>
<li><a href="http://informasibloger.blogspot.com/">Jaran</a></li>
<li><a href="http://informasibloger.blogspot.com/">Sampi</a></li>
<li><a href="http://informasibloger.blogspot.com/">Bedes</a> </li>
</ul>
</div>
</center>
<style>
.menuzoomout ul {
width: 40%;
margin: 15px 10px;
padding: 10px;
list-style: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background: #FF8C00;
background: -moz-linear-gradient(left, #FF8C00 0%, #e8e8e8 29%, #FF8C00 43%, #e8e8e8 65%, #FF8C00 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cccccc), color-stop(29%,#e8e8e8), color-stop(43%,#cccccc), color-stop(65%,#e8e8e8), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(left, #8B0000 0%,#e8e8e8 29%,#cccccc 43%,#e8e8e8 65%,#FF8C00 100%);
background: -o-linear-gradient(left, #FF8C00%,#e8e8e8 29%,#FF8C00 43%,#e8e8e8 65%,#FF8C00 100%);
background: -ms-linear-gradient(left, #FF8C00 0%,#e8e8e8 29%,#FF8C00 43%,#e8e8e8 65%,#FF8C00 100%);
background: linear-gradient(to right, #FF8C00 0%,#e8e8e8 29%,#FF8C00 43%,#e8e8e8 65%,#FF8C00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#000000',GradientType=1 );
}
.menuzoomout ul li {
margin: 5px auto;
padding: 5px;border:2px solid #cdcdcd;
cursor: pointer;color:#000000;
font-family: century gothic;font-weight: bold;
font-size: 25px;
line-height: 30px;
-webkit-transition: 200ms all;
-moz-transition: 200ms all;
-o-transition: 200ms all;
transition: 200ms all;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
text-shadow: -1px 0 #cdcdcd, 0 1px #cdcdcd, 1px 0 #cdcdcd, 0 -1px #cdcdcd, -1px 1px 2px...