Ajax Loader
HTML 
<nav class="menu1">
1
<nav class="menu1">
2
    <ul>
3
        <li> <a href="#"><img src="http://cdn1.iconfinder.com/data/icons/dortmund/Dortmund-32x32/home.png">Home</a> </li>
4
        <li> <a href="#"><img src="http://cdn1.iconfinder.com/data/icons/dortmund/Dortmund-32x32/hire-me.png">About</a> </li>
5
        <li> <a href="#"><img src="http://cdn1.iconfinder.com/data/icons/dortmund/Dortmund-32x32/lightbulb.png">Project</a> </li>
6
        <li> <a href="#"><img src="http://cdn1.iconfinder.com/data/icons/dortmund/Dortmund-32x32/special-offer.png">Experiments</a> </li>
7
    </ul>
8
</nav>
 
CSS 
body{
1
body{
2
  margin: 20% 8%;
3
}
4
 
5
nav.menu1{
6
  border: 1px solid #e1e1e1;
7
}
8
 
9
nav.menu1 ul{
10
    list-style: none;
11
    margin: 0; padding: 0;
12
}
13
 
14
nav.menu1 ul li{
15
    display: inline-block;
16
     margin-right: -5px; /* http://goo.gl/PgDFb */
17
}
18
 
19
nav.menu1 ul li a img{
20
vertical-align: -9px;
21
  margin: 0; padding: 0 10px 0 0;
22
    opacity: 0.7;
23
}
24
 
25
nav.menu1 ul li a{
26
27
    display: inline-block;
28
    padding: 15px 25px;
29
  
30
    font-size: 1.1em;
31
    color: #333;
32
    text-decoration: none;
33
    transition: all 0.4s;
34
    -webkit-transition: all 0.4s;
35
    box-shadow: inset -1px 0 1px rgba(0,0,0, 0.2),
36
    inset 1px 0 1px rgba(0,0,0, 0.2),
37
                inset 0 -29px rgba(0,0,0, 0.08);
38
}
39
 
40
 
41
nav.menu1 ul li a:hover{
42
    background: #eee;
43
    color: #000;
44
    padding: 15px 40px;
45
}
46
 
47
nav.menu1 ul li a:active{
48
   background: #ccc;
49
}
50
 
 

Css3 horizontal menù

CSSDeck G+