Make Clickable Menu Google Search Engine

Setelah menghilangkan beberapa fitur dari tampilan yang ada pada google search engine bersamaan dengan itu hadir juga fitur baru. Contoh fitur yg dihilangkan antara lain screenshoot website, google plus share, link cached, similar and etc. Fitur baru pengganti hadir dengan membawa clickable menu yg isinya terdiri dari link cached, similar and share (yg terlihat cuma itu :d) Link navigasi dipindahkan ke bagian atas tepat di bawah kotak pencarian dan tentunya main navigasi yg selalu ada dimanapun produk google berada :))
Koben mau berbagi cara membuat clickable menu google full memakai CSS. Bila masih belum ngeuh dengan clickcable menu, perhatikan!!!
Before the clickAfter the clickItulah yg akan kita buat sekarang bos :d Gue hanya membuatkan versi default, jika mau keren silahkan kalian tambahkan variabel CSS sendiri!
DEMO

Cached

Similar

Share

.contshare {
  display: none;
}
.contshare a {
  color: #343434;
  text-align: center;
  text-decoration: none;
}
.wrapshare:active .contshare {
  display: block;
}
.wrapshare {
  position: relative;
}
.contshare:hover {
  display: block;
}
.parrow {
  width: 0px;
  height: 0px;
  cursor: pointer;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: #060 transparent transparent transparent;
}
.contshare {
  width: auto;
  position: absolute;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.contshare li {
  color: #343434;
  background: #FFF;
  padding: 5px 10px;
  text-align: center;
  list-style-type: none;
}
.contshare li:hover {
  background: #EEE;
}

Planning HTML<div class="wrapshare">
<div class="contshare">
<li><a href="#">Cached</a></li>
<li><a href="#">Similar</a></li>
<li><a href="https://plus.google.com/u/0/_/sharebox/dialog" target="_blank">Share</a></li>
</div>
<div class="parrow"></div>
</div>Aurlah sendiri nominal yg ada, itu hanya kode CSS dasar yang perlu penambahan disana-sini.
Semoga bermanfaat :)
Happy blogging \m/