Цікаве вертикальне меню на css3

lt;ul class="Ca-menu"gt;lt;ligt;lt;a href="#"gt;lt;span class="Ca-icon"gt; Alt;/spangt;lt;div class="Ca-content"gt;lt;h2 class="Ca-main"gt; Пункт 1lt;/h2gt;lt;/divgt;lt;/agt;lt;/ligt;lt;ligt;lt;a href="#"gt;lt;span class="Ca-icon"gt; Blt;/spangt;lt;div class="Ca-content"gt;lt;h2 class="Ca-main"gt; Пункт 2lt;/h2gt;lt;/divgt;lt;/agt;lt;/ligt;lt;ligt;lt;a href="#"gt;lt;span class="Ca-icon"gt; Clt;/spangt;lt;div class="Ca-content"gt;lt;h2 class="Ca-main"gt; Пункт 3lt;/h2gt;lt;/divgt;lt;/agt;lt;/ligt;lt;ligt;lt;a href="#"gt;lt;span class="Ca-icon"gt; Dlt;/spangt;lt;div class="Ca-content"gt;lt;h2 class="Ca-main"gt; Пункт 4lt;/h2gt;lt;/divgt;lt;/agt;lt;/ligt;lt;ligt;lt;a href="#"gt;lt;span class="Ca-icon"gt; Elt;/spangt;lt;div class="Ca-content"gt;lt;h2 class="Ca-main"gt; Пункт 5lt;/h2gt;lt;/divgt;lt;/agt;lt;/ligt;lt;/ulgt;

.ca-menu {padding:0-margin:20px auto-width: 500px-}.ca-menu li {width: 500px-height: 100px-overflow: hidden-position: relative-display: block-background: #fff--webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2)--moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2)-box-shadow: 1px 1px 2px rgba(0,0,0,0.2)-margin-bottom: 4px--webkit-transition: all 300ms linear--moz-transition: all 300ms linear--o-transition: all 300ms linear--ms-transition: all 300ms linear-transition: all 300ms linear-}.ca-menu li: Last-child {margin-bottom: 0px-}.ca-menu li a {text-align: left-width: 100%-height: 100%-display: block-color: # 333-position: relative-}.ca-icon {font-family: `WebSymbolsRegular`, cursive-font-size: 20px-text-shadow: 0px 0px 1px # 333-line-height: 90px-position: absolute-width: 90px-left: 20px-text-align: center--webkit-transition: all 300ms linear--moz-transition: all 300ms linear--o-transition: all 300ms linear--ms-transition: all 300ms linear-transition: all 300ms linear-}.ca-content {position: absolute-left: 120px-width: 370px-height: 60px-top: 20px-}.ca-main {font-size: 30px--webkit-transition: all 300ms linear--moz-transition: all 300ms linear--o-transition: all 300ms linear--ms-transition: all 300ms linear-transition: all 300ms linear-}.ca-sub {font-size: 14px-color: # 666--webkit-transition: all 300ms linear--moz-transition: all 300ms linear--o-transition: all 300ms linear--ms-transition: all 300ms linear-transition: all 300ms linear-}.ca-menu li: hover {background: # e1f0fa-}.ca-menu li: hover .ca-icon {font-size: 40px-color: # 259add-opacity: 0.8-text-shadow: 0px 0px 13px #fff-}.ca-menu li: hover .ca-main {opacity: 1-color:# 2676ac--webkit-animation: moveFromTop 300ms ease-in-out--moz-animation: moveFromTop 300ms ease-in-out--ms-animation: moveFromTop 300ms ease-in-out-}.ca-menu li: hover .ca-sub {opacity: 1--webkit-animation: moveFromBottom 300ms ease-in-out--moz-animation: moveFromBottom 300ms ease-in-out--ms-animation: moveFromBottom 300ms ease-in-out-}@ -webkit-keyframes moveFromBottom {from {opacity: 0--webkit-transform: translateY(200%)-}to {opacity: 1--webkit-transform: translateY(0%)-}}@ -moz-keyframes moveFromBottom {from {opacity: 0--moz-transform: translateY(200%)-}to {opacity: 1--moz-transform: translateY(0%)-}}@ -ms-keyframes moveFromBottom {from {opacity: 0--ms-transform: translateY(200%)-}to {opacity: 1--ms-transform: translateY(0%)-}}@ -webkit-keyframes moveFromTop {from {opacity: 0--webkit-transform: translateY(-200%)-}to {opacity: 1--webkit-transform: translateY(0%)-}}@ -moz-keyframes moveFromTop {from {opacity: 0--moz-transform: translateY(-200%)-}to {opacity: 1--moz-transform: translateY(0%)-}}@ -ms-keyframes moveFromTop {from {opacity: 0--ms-transform: translateY(-200%)-}to {opacity: 1--ms-transform: translateY(0%)-}}