Ajax Loader
HTML 
<nav>
1
<nav>
2
    <ul>
3
      <li><a href="#">View</a></li>
4
      <li class="drop">
5
        <a href="#">You</a>
6
7
        <div class="dropdownContain">
8
          <div class="dropOut">
9
            <div class="triangle"></div>
10
            <ul>
11
              <li>Plan</li>
12
              <li>Account Settings</li>
13
              <li>Switch Account</li>
14
              <li>Sign Out</li>
15
            </ul>
16
          </div>
17
        </div>
18
19
      </li>
20
      <li><a href="#">Help</a></li>
21
    </ul>
22
</nav>
 
CSS 
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;}
1
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;}
2
 
3
 
4
/*---------- BODY --------------------------------*/
5
 
6
body {
7
  text-align: center;
8
  background: #e0e0e0;
9
  padding-bottom: 200px;
10
}
11
 
12
a {
13
  text-decoration: none;
14
}
15
 
16
/*---------- Wrapper --------------------*/
17
 
18
nav {
19
  width: 100%;
20
  height: 80px;
21
  background: #222;
22
}
23
 
24
ul {
25
  text-align: center;
26
}
27
 
28
ul li {
29
  font: 13px Verdana, 'Lucida Grande';
30
  cursor: pointer;
31
  -webkit-transition: padding .05s linear;
32
  -moz-transition: padding .05s linear;
33
  -ms-transition: padding .05s linear;
34
  -o-transition: padding .05s linear;
35
  transition: padding .05s linear;
36
}
37
ul li.drop {
38
  position: relative;
39
}
40
ul > li {
41
  display: inline-block;
42
}
43
ul li a {
44
  line-height: 80px;
45
  padding: 0 20px;
46
  height: 80px;
47
  color: #777;
48
  -webkit-transition: all .1s ease-out;
49
  -moz-transition: all .1s ease-out;
50
  -ms-transition: all .1s ease-out;
51
  -o-transition: all .1s ease-out;
52
  transition: all .1s ease-out;
53
}
54
ul li a:hover {
55
  color: #eee;
56
}
57
 
58
.dropOut .triangle {
59
  width: 0;
60
  height: 0;
61
  position: absolute;
62
  border-left: 8px solid transparent;
63
  border-right: 8px solid transparent;
64
  border-bottom: 8px solid white;
65
  top: -8px;
66
  left: 50%;
67
  margin-left: -8px;
68
}
69
.dropdownContain {
70
  width: 160px;
71
  position: absolute;
72
  z-index: 2;
73
  left: 50%;
74
  margin-left: -80px; /* half of width */
75
  top: -400px;
76
}
77
.dropOut {
78
  width: 160px;
79
  background: white;
80
  float: left;
81
  position: relative;
82
  margin-top: 0px;
83
  opacity: 0;
84
  -webkit-border-radius: 4px;
85
  -moz-border-radius: 4px;
86
  border-radius: 4px;
87
  -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
88
  -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
89
  box-shadow: 0 1px 6px rgba(0,0,0,.15);
90
  -webkit-transition: all .1s ease-out;
91
  -moz-transition: all .1s ease-out;
92
  -ms-transition: all .1s ease-out;
93
  -o-transition: all .1s ease-out;
94
  transition: all .1s ease-out;
95
}
96
 
97
.dropOut ul {
98
  float: left;
99
  padding: 10px 0;
100
}
101
.dropOut ul li {
102
  text-align: left;
103
  float: left;
104
  width: 125px;
105
  padding: 12px 0 10px 15px;
106
  margin: 0px 10px;
107
  color: #777;
108
  -webkit-border-radius: 4px;
109
  -moz-border-radius: 4px;
110
  border-radius: 4px;
111
  -webkit-transition: background .1s ease-out;
112
  -moz-transition: background .1s ease-out;
113
  -ms-transition: background .1s ease-out;
114
  -o-transition: background .1s ease-out;
115
  transition: background .1s ease-out;
116
}
117
 
118
.dropOut ul li:hover {
119
  background: #f6f6f6;
120
}
121
 
122
ul li:hover a { color: white; }
123
ul li:hover .dropdownContain { top: 65px; }
124
ul li:hover .underline { border-bottom-color: #777; }
125
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
 

Soothing CSS3 Dropdown Animation

CSSDeck G+