MTS Datenraum 3

index.html

<ul>
  <li><a href="#" class="zero active"><span>Alle Dateien</span></a></li>
  <li><a href="#" class="one"><span>Grundstück/Gebäude</span></a></li>
  <li><a href="#" class="two"><span>Baurecht, Bebauung</span></a></li>
  <li><a href="#" class="three"><span>Nutzungs- und Grundstückskaufverträge</span></a></li>
  <li><a href="#" class="four"><span>Corporate</span></a></li>
  <li><a href="#" class="five"><span>Netz und Einspeisung</span></a></li>
  <li><a href="#" class="six"><span>Sonstiges</span></a></li>
</ul>

MTS Datenraum 3.markdown

MTS Datenraum 3

A Pen by Kunsang Norbu Tsering on CodePen.

License.

style.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{ background: #dcdcdc;}
ul { position: absolute;  top: 100px; left: 400px;}
ul li { display: block;}
ul li a {
  display: inline-block;
  width: 32px; height: 32px;
  margin-bottom: 8px; padding: 8px;
  color: #fff;
  background: #fff 8px center / 32px 32px no-repeat;
  font: .8em 'Open Sans', sans-serif;
  white-space: nowrap; text-wrap: none;
  text-decoration: none;
 }
ul li a span {
  position: absolute;
  right: 1em;
  margin-top: -8px; padding: 20px;
  line-height: 8px;
  background-color: #2598bf;
  transition: all .5s ease;
  pointer-events: none;
  text-align: right;  
  opacity: 0;
}
ul li a span:after {
  content: "";
  position: absolute;
  top: 16px; right: -10px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent #2598bf;
}
ul li a:hover span { 
  right: 60px;
  opacity: 1;
}
ul li a:hover, ul li a.active { background-color: #2598bf;}

a.zero { background-image: url(http://bit.ly/1pk4z9H);}
a.one { background-image: url(https://goo.gl/6rrohw);}
a.two { background-image: url(https://goo.gl/Qmor6H);}
a.three { background-image: url(http://bit.ly/1LDP4mB);}
a.four { background-image: url(http://bit.ly/1TuG46k);}
a.five { background-image: url(http://bit.ly/1RsJAHW);}
a.six {
  background-image: url(http://bit.ly/1TdD5ib);
  background-size: 42px;
  background-position: 2px center;
}

a.zero:hover, a.zero.active  { background-image: url(http://bit.ly/1RDvKmg);}
a.one:hover, a.one.active  { background-image: url(http://bit.ly/1Yah2sa);}