Ajax Loader
HTML 
<ul><li>Home</li>
1
<ul><li>Home</li>
2
  <li>About</li>
3
  <li>
4
    Portfolio
5
    <ul>
6
      <li>Web Design</li>
7
      <li>Web Development</li>
8
      <li>Illustrations</li>
9
    </ul>
10
  </li>
11
  <li>Blog</li>
12
  <li>Contact</li>
13
</ul>
 
CSS 
body {
1
body {
2
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
3
  padding: 20px 50px 150px;
4
  font-size: 13px;
5
  text-align: center;
6
  background: #E3CAA1;
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
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
16
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
17
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
18
}
19
ul li {
20
  font: bold 12px/18px sans-serif;
21
  display: inline-block;
22
  margin-right: -4px;
23
  position: relative;
24
  padding: 15px 20px;
25
  background: #fff;
26
  cursor: pointer;
27
  -webkit-transition: all 0.2s;
28
  -moz-transition: all 0.2s;
29
  -ms-transition: all 0.2s;
30
  -o-transition: all 0.2s;
31
  transition: all 0.2s;
32
}
33
ul li:hover {
34
  background: #555;
35
  color: #fff;
36
}
37
ul li ul {
38
  padding: 0;
39
  position: absolute;
40
  top: 48px;
41
  left: 0;
42
  width: 150px;
43
  -webkit-box-shadow: none;
44
  -moz-box-shadow: none;
45
  box-shadow: none;
46
  display: none;
47
  opacity: 0;
48
  visibility: hidden;
49
  -webkit-transiton: opacity 0.2s;
50
  -moz-transition: opacity 0.2s;
51
  -ms-transition: opacity 0.2s;
52
  -o-transition: opacity 0.2s;
53
  -transition: opacity 0.2s;
54
}
55
ul li ul li {
56
  background: #555;
57
  display: block;
58
  color: #fff;
59
  text-shadow: 0 -1px 0 #000;
60
}
61
ul li ul li:hover { background: #666; }
62
ul li:hover ul {
63
  display: block;
64
  opacity: 1;
65
  visibility: visible;
66
}
 

Another Simple CSS3 Dropdown Menu

CSSDeck G+