CodePen

HTML

            
              <ul id="nav">
    <li><a class="maki-grocery-store" href="#">Supermarkeder</a></li>
    <li><a class="maki-tree-1" href="#">Byggemarkeder</a></li>
     <li><a class="maki-prison" href="#">Bolig/Have</a></li>
    <li><a class="entypo-flash" href="#">Elektronik</a></li>
    <li><a class="maki-commerical-building" href="#">Storcentre</a></li>
    <li><a class="maki-library" href="#">Boghandlere</a></li>
    <li><a class="maki-shop" href="#">Beklædning</a></li>
    <li><a class="entypo-dot-3" href="#">Andet</a></li> 
  </ul>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,500);
@import url(http://weloveiconfonts.com/api/?family=entypo|maki);



*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#nav { 
display:block;
margin: 0 auto; 
width:100%;
height:100%;
}


#nav li { 
list-style:none;
float:left;
display: inline; 

}


#nav li a {
 position:relative; 
 width: 128px;
 height: 85px; 
 font: 400 13px/9.5 Open Sans;
 color: #444;
 text-align: center;
 display: block; 
 border: 1px solid rgb(241, 241, 241);
 text-decoration: none; 
 text-transform: uppercase; 

-webkit-box-shadow: rgb(197, 197, 197) 0px 1px 0px;
-moz-box-shadow: rgb(197, 197, 197) 0px 1px 0px;
box-shadow: rgb(197, 197, 197) 0 1px 4px;
background: #FEFEFE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FEFEFE), to(#F4F4F4));
background: -webkit-linear-gradient(#FEFEFE, #F4F4F4);
background: -moz-linear-gradient(#FEFEFE, #F4F4F4);
background: -ms-linear-gradient(#FEFEFE, #F4F4F4);
background: -o-linear-gradient(#FEFEFE, #F4F4F4);
background: linear-gradient(#FEFEFE, #F4F4F4);
}

#nav li a:hover, #nav li a:hover::before
{ color: #C8CC5E; }

#nav li.active a {  }

[class*="maki-"]::before,
[class*="entypo-"]::before{
  font-family: 'maki', sans-serif;
  position:absolute;
  font-size:30px;
  top:-115px;
  left:52px;
  color:#444;
  color:rgba(68, 68, 68, 0.9);
  transition:all .1s;
  -webkit-transition:all .1s;
}

[class*="entypo-"]::before {
  font-family: 'entypo', sans-serif;
  left:58px;
}

.entypo-dot-3::before {left:48px; top:-110px;}


@media only screen 
and (min-width : 320px) and (max-width : 320px)
{ 
#nav {
display: none;}
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................