<div id="social">
  <div class="menu">
  <ul class="primary-menu">
  <li class="facebook"><a class="social-item" href="#">f</a><span class="social-span">Присоединяйтесь к нам на Facebook</span></li>
  <li class="twitter"><a class="social-item" href="#">t</a><span class="social-span">В Twitter</span></li>
  <li class="flickr"><a class="social-item" href="#">c</a><span class="social-span">Добавьте нас в Flickr</span></li>
  <li class="rss"><a class="social-item" href="#">a</a><span class="social-span">Следите за нами через RSS</span></li>
  <li class="mail"><a class="social-item" href="#">k</a><span class="social-span">Подпишитесь на уведомления через почту</span></li>
  </ul>
  </div>
</div>

 @font-face {
  font-family: 'Social';
  src: url('/fonts/socialicons-webfont.eot');
  src: url('/fonts/socialicons-webfont.eot?#iefix') format('embedded-opentype'),
  url('/fonts/socialicons-webfont.woff') format('woff'),
  url('/fonts/socialicons-webfont.ttf') format('truetype'),
  url('/fonts/socialicons-webfont.svg#SocialIconsMedium') format('svg');
  font-weight: normal;
  font-style: normal;
}

#social {
  width:960px;
  margin:100px auto;
  background:#ccc;
  padding:20px 0;
}

#social .menu {
  text-align:center;
  padding-top:30px;
}

#social .menu .primary-menu {
  list-style-type:none;
  position:relative;
}

#social .menu .primary-menu li {
  display:inline;
  text-align:center;
  margin:0 10px;
  position:relative;
}

#social .menu .primary-menu li a {
  position:relative;
  text-decoration:none;
  font-family:'Social' !important;
  font-size:25px;
  background:#d9d9d9;
  display:inline-block;
  width:50px;
  height:35px;
  padding-top:15px;
  color:#fff;
  border:3px solid #fff;
 
  -webkit-border-radius:100px;
  -moz-border-radius:100px;
  -o-border-radius:100px;
  -ms-border-radius:100px;
  -khtml-border-radius:100px;
  border-radius:100px;
 
  -webkit-box-shadow:0 0 1px 1px #afafaf;
  -moz-box-shadow:0 0 1px 1px #afafaf;
  -o-box-shadow: 0 0 1px 1px #afafaf;
  -ms-box-shadow: 0 0 1px 1px #afafaf;
  -khtml-box-shadow:0 0 1px 1px #afafaf;
  box-shadow:0 0 1px 1px #afafaf;
 
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  -o-transition:all 1s;
  -ms-transition:all 1s;
  -khtml-transition:all 1s;
  transition:all 1s;
 
  behavior: url(pie/PIE.htc); /* CSS3 Fix for Internet Explorer */
}
  #social .menu .primary-menu li.facebook a:hover { background:#00438f;}
#social .menu .primary-menu li.twitter a:hover { background:#00b8df;}
#social .menu .primary-menu li.flickr a:hover { background:#df00bd;}
#social .menu .primary-menu li.rss a:hover { background:#ff7800;}
#social .menu .primary-menu li.mail a:hover { background:#1d1d1d;}
#social .menu .primary-menu li a:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -khtml-transform: rotate(360deg);
  transform: rotate(360deg);
 
  behavior: url(pie/PIE.htc); /* CSS3 Fix for Internet Explorer */
}

#social .menu .primary-menu li span.social-span {
  font-family:Arial;
  font-size:11px;
  position:absolute;
  width:100px;
  top:45px;
  left:-45%;
  background:#ffffff;
  padding:5px;
  border:1px solid #B8B8B8;
  opacity:0;
 
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  -o-border-radius:10px;
  -ms-border-radius:10px;
  -khtml-border-radius:10px;
  border-radius:10px;
 
  -webkit-transition:opacity 1s ease-in-out;
  -moz-transition:opacity 1s ease-in-out;
  -o-transition:opacity 1s ease-in-out;
  -ms-transition:opacity 1s ease-in-out;
  -khtml-transition:opacity: 1s ease-in-out;
  transition:opacity 1s ease-in-out;
 
  behavior: url(pie/PIE.htc); /* CSS3 Fix for Internet Explorer */
}

#social .menu .primary-menu li a:hover ~ span.social-span {
  opacity:1;
}

#social .menu .primary-menu li span.social-span:after {
  content:"";
  position:absolute;
  border-color:#fff transparent;
  display:block;
  top:-7px;
  left:40%;
  width:0;
  border-width:0 7px 7px;
  border-style:solid;
}