Untitled

<div id="header">

<ul>

  <li id="home" class="entypo-home"></li>

  <li id="shop" class="entypo-tag"></li>

  <li id="about" class="entypo-book"></li>

  <li id="contact" class="entypo-feather"></li>

  <li id="rate" class="entypo-gauge"></li>

</ul>

</div>

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */

[class*="entypo-"]:before {

  font-family: 'entypo', sans-serif;

}

#header {

  width:100%;

  height:100px;

  margin:0;

  position:fixed;

  background:#ccc;

  vertical-align: baseline;

  overflow:hidden;

}

ul {

  font-size:25px;

  margin:0;

  padding:0;

}

li {

  cursor:pointer;

  padding:40px 20px;

  border-right:1px solid #ddd;

  display:block;

  float:left;

  -webkit-transition: .5s;

  -moz-transition: .5s;

  -o-transition: .5s;

  transition: .5s;

  -webkit-transition-delay: .1s;

  -moz-transition-delay: .1s;

  -o-transition-delay: .1s;

  transition-delay: .1s;

}

li:hover {

  color:#ccc;

  background:#000;

  -webkit-transition: .5s;

  -moz-transition: .5s;

  -o-transition: .5s;

  transition: .5s;

}

document.getElementById("home").onmouseover = function() { document.getElementById("home").innerHTML = " Home"}

document.getElementById("home").onmouseout = function() { document.getElementById("home").innerHTML = ""}

document.getElementById("shop").onmouseover = function() { document.getElementById("shop").innerHTML = " Shop"}

document.getElementById("shop").onmouseout = function() { document.getElementById("shop").innerHTML = ""}

document.getElementById("about").onmouseover = function() { document.getElementById("about").innerHTML = " About"}

document.getElementById("about").onmouseout = function() { document.getElementById("about").innerHTML = ""}

document.getElementById("contact").onmouseover = function() { document.getElementById("contact").innerHTML = " Contact"}

document.getElementById("contact").onmouseout = function() { document.getElementById("contact").innerHTML = ""}

document.getElementById("rate").onmouseover = function() { document.getElementById("rate").innerHTML = " Rate"}

document.getElementById("rate").onmouseout = function() { document.getElementById("rate").innerHTML = ""}