Ajax Loader
HTML
<menu>
1
<menu>
2
<ul><li class='home'>Home</li>
3
  <li>About</li>
4
  <li>
5
    Portfolio
6
    <ul>
7
      <li>Web Design</li>
8
      <li>Web Development</li>
9
      <li class='ill'>Illustrations</li>
10
    </ul>
11
  </li>
12
  <li>Blog</li>
13
  <li class='contact'>Contact</li>
14
</ul>
15
</menu>
 
CSS
body {
1
body {
2
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
3
  margin: 0;
4
  font-size: 13px;
5
  text-align: center;
6
  background: #2196F3;
7
}
8
 
9
ul {
10
  text-align: left;
11
  display: inline;
12
  margin: 0;
13
  padding: 15px 4px 17px 0;
14
  list-style: none;
15
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
16
}
17
ul li {
18
  font: bold 12px/18px sans-serif;
19
  display: inline-block;
20
  margin-right: -4px;
21
  position: relative;
22
  padding: 15px 20px;
23
  background: #00BCD4;
24
  cursor: pointer;
25
  -webkit-transition: all 0.2s;
26
  -moz-transition: all 0.2s;
27
  -ms-transition: all 0.2s;
28
  -o-transition: all 0.2s;
29
  transition: all 0.2s;
30
  color: #fff;
31
}
32
ul li:hover {
33
  background: #4DD0E1;
34
  color: #fff;
35
}
36
ul li ul {
37
  padding: 0;
38
  position: absolute;
39
  top: 48px;
40
  left: 0;
41
  width: 150px;
42
  -webkit-box-shadow: none;
43
  -moz-box-shadow: none;
44
  box-shadow: none;
45
  display: none;
46
  opacity: 0;
47
  visibility: hidden;
48
  -webkit-transiton: opacity 0.2s;
49
  -moz-transition: opacity 0.2s;
50
  -ms-transition: opacity 0.2s;
51
  -o-transition: opacity 0.2s;
52
  -transition: opacity 0.2s;
53
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
54
}
55
ul li ul li { 
56
  background: #00ACC1; 
57
  display: block; 
58
  color: #fff;
59
}
60
ul li ul li:hover { background: #4DD0E1;}
61
ul li:hover ul {
62
  display: block;
63
  opacity: 1;
64
  visibility: visible;
65
}
66
.home {
67
  border-top-left-radius: 3px;
68
  border-bottom-left-radius: 3px;
69
}
70
.contact {
71
  border-top-right-radius: 3px;
72
  border-bottom-right-radius: 3px;
73
}
74
.ill {
75
  border-bottom-right-radius: 3px;
76
  border-bottom-left-radius: 3px;
77
}
78
menu {
79
  padding-top: 200px;
80
}
 

Another Simple CSS3 Dropdown Menu (Materialized)

CSSDeck G+