Old YouTube style category menu

Preview:
 



HTML

Code
<div class="block">
  <div class="blockcontent">
   
  <li><a href="#"><span class="g"> Gaming </span></a></li>
  <li><a href="#"><span class="b"> Blog </span></a></li>
  <li><a href="#"><span class="p"> Pranks </span></a></li>
  <li><a href="#"><span class="s"> Sketch </span></a></li>
  <li><a href="#"><span class="m"> Music </span></a></li>
  <li><a href="#"><span class="c"> Comedy </span></a></li>
  <li><a href="#"><span class="i"> Informative </span></a></li>
  <li><a href="#"><span class="a"> Animal </span></a></li>
  <li><a href="#"><span class="f"> Food </span></a></li>
  <li><a href="#"><span class="sp"> Sport </span></a></li>
  <li><a href="#"><span class="se"> Reviews </span></a></li>
  <li><a href="#"><span class="ba"> Babies </span></a></li>
  <li><a href="#"><span class="fa"> Fail </span></a></li>
  <li><a href="#"><span class="h"> How to & Tutorials </span></a></li>
  </div>
</div>


CSS

Code
.block {
  margin: 10px 0;
  border-bottom: 1px dotted #bbb;
  box-shadow: 0px 0px 7px rgba(0,0,0,.2);
  width: 300px;
  background: #fff;
}
.block:last-child {
  border-bottom: 0;
}
.blocktitle {
  font-size: 1.143em;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}
.blockcontent {
  margin: 15px 0 20px;
  display: table;
  width: 100%;
}
.g{
background: url(http://aafilm.clan.su/img/categories/g.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.g:hover{
background: url(http://aafilm.clan.su/img/categories/gh.png) no-repeat left center;
background-position-x: 16px;
}
.b{
background: url(http://aafilm.clan.su/img/categories/b.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.b:hover{
background: url(http://aafilm.clan.su/img/categories/bh.png) no-repeat left center;
background-position-x: 16px;
}
.p{
background: url(http://aafilm.clan.su/img/categories/p.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.p:hover{
background: url(http://aafilm.clan.su/img/categories/ph.png) no-repeat left center;
background-position-x: 16px;
}
.s{
background: url(http://aafilm.clan.su/img/categories/s.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.s:hover{
background: url(http://aafilm.clan.su/img/categories/sh.png) no-repeat left center;
background-position-x: 16px;
}
.m{
background: url(http://aafilm.clan.su/img/categories/m.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.m:hover{
background: url(http://aafilm.clan.su/img/categories/mh.png) no-repeat left center;
background-position-x: 16px;
}
.c{
background: url(http://aafilm.clan.su/img/categories/c.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.c:hover{
background: url(http://aafilm.clan.su/img/categories/ch.png) no-repeat left center;
background-position-x: 16px;
}
.i{
background: url(http://aafilm.clan.su/img/categories/i.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.i:hover{
background: url(http://aafilm.clan.su/img/categories/ih.png) no-repeat left center;
background-position-x: 16px;
}
.a{
background: url(http://aafilm.clan.su/img/categories/a.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.a:hover{
background: url(http://aafilm.clan.su/img/categories/ah.png) no-repeat left center;
background-position-x: 16px;
}
.f{
background: url(http://aafilm.clan.su/img/categories/f.png) no-repeat left center;
background-position-x: 19px;
display: block;
padding: 7px;
padding-left: 40px;
}
.f:hover{
background: url(http://aafilm.clan.su/img/categories/fh.png) no-repeat left center;
background-position-x: 19px;
}
.sp{
background: url(http://aafilm.clan.su/img/categories/sp.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.sp:hover{
background: url(http://aafilm.clan.su/img/categories/sph.png) no-repeat left center;
background-position-x: 16px;
}
.se{
background: url(http://aafilm.clan.su/img/categories/se.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.se:hover{
background: url(http://aafilm.clan.su/img/categories/seh.png) no-repeat left center;
background-position-x: 16px;
}
.ba{
background: url(http://aafilm.clan.su/img/categories/ba.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.ba:hover{
background: url(http://aafilm.clan.su/img/categories/bah.png) no-repeat left center;
background-position-x: 16px;
}
.fa{
background: url(http://aafilm.clan.su/img/categories/fa.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.fa:hover{
background: url(http://aafilm.clan.su/img/categories/fah.png) no-repeat left center;
background-position-x: 16px;
}
.h{
background: url(http://aafilm.clan.su/img/categories/h.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.h:hover{
background: url(http://aafilm.clan.su/img/categories/hh.png) no-repeat left center;
background-position-x: 16px;
}
.blockcontent a{
display: block;
color:#333;
text-transform: uppercase;
text-decoration: none;
font-family: sans-serif;
}
.blockcontent a:hover{
background: #96d6df;
color:#fff;
}
.blockcontent li {
list-style: none;
}

Total comments: 0
Name *:
Email:
Code *: