Ajax Loader
HTML 
<div id="container">
1
<div id="container">
2
  <ul id="nav">
3
    <li><a href="#">Home</a></li>
4
    <li>
5
      <a href="#">About Us</a>
6
      <ul>
7
        <li><a href="#">What we do</a></li>
8
        <li><a href="#">Who we are</a></li>
9
        <li><a href="#">I love this menu. Its Awesome!</a></li>
10
      </ul>
11
    </li>
12
    <li>
13
      <a href="#">Services</a>
14
      <ul>
15
        <li><a href="#">Web Designing</a></li>
16
        <li><a href="#">Motion Graphics</a></li>
17
        <li><a href="#">Web Development (PHP, Python)</a></li>
18
        <li><a href="#">Photography</a></li>
19
      </ul>
20
    </li>
21
    <li><a href="#">Portfolio</a></li>
22
    <li><a href="#">Talk to us</a></li>
23
  </ul>
24
</div>
 
CSS 
/****************************
1
/****************************
2
Two Level Superfishy CSS3 Menu
3
By Solitary Designs: http://solitarydesigns.net
4
****************************/
5
 
6
#container {
7
  width: 600px;
8
  position: relative;
9
  margin: 20px auto 0;
10
}
11
 
12
ul#nav {
13
  list-style: none;
14
  height: 36px;
15
  padding: 0;
16
  margin-left: 100px;
17
  display: inline-block;
18
  border: 1px solid #b3b3b3;
19
  position: relative;
20
 
21
  -webkit-border-radius: 4px;
22
  -moz-border-radius: 4px;
23
  border-radius: 4px;
24
}
25
 
26
ul#nav li {
27
  text-align: left;
28
}
29
 
30
ul#nav>li {
31
  float: left;
32
  border-top: 1px solid white;
33
  position: relative;
34
35
  background-repeat: no-repeat;
36
  background-color: #cfcfcf; /* Old browsers */
37
  background-image: -moz-linear-gradient(top,  #e3e3e3 0%, #cfcfcf 100%); /* FF3.6+ */
38
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3e3e3), color-stop(100%,#cfcfcf)); /* Chrome,Safari4+ */
39
  background-image: -webkit-linear-gradient(top,  #e3e3e3 0%,#cfcfcf 100%); /* Chrome10+,Safari5.1+ */
40
  background-image: -o-linear-gradient(top,  #e3e3e3 0%,#cfcfcf 100%); /* Opera 11.10+ */
41
  background-image: -ms-linear-gradient(top,  #e3e3e3 0%,#cfcfcf 100%); /* IE10+ */
42
  background-image: linear-gradient(top,  #e3e3e3 0%,#cfcfcf 100%); /* W3C */
43
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e3', endColorstr='#cfcfcf',GradientType=0 ); /* IE6-8 */
44
45
  -webkit-transition: all .2s ease;
46
  -moz-transition: all .2s ease;
47
  -ms-transition: all .2s ease;
48
  -o-transition: all .2s ease;
49
  transition: all .2s ease;
50
}
51
 
52
ul#nav>li:hover {
53
  background-position: 0 -10px;
54
}
55
 
56
ul#nav > li:hover ul{
57
  -webkit-animation: anim .2s forwards linear;
58
  -moz-animation: anim .2s forwards linear;
59
  -ms-animation: anim .2s forwards linear;
60
  -o-animation: anim .2s forwards linear;
61
  animation: anim .2s forwards linear;
62
}
63
 
64
ul#nav>li:hover>a {
65
  color: white;
66
}
67
 
68
ul#nav>li>a {
69
  padding: 10px 15px;
70
  color: #777;
71
  text-decoration: none;
72
  font: 12px Arial;
73
  border-left: 1px solid #bababa;
74
  border-right: 1px solid #eee;
75
  display: block;
76
  line-height: 15px;
77
78
  -webkit-transition: all .2s ease;
79
  -moz-transition: all .2s ease;
80
  -ms-transition: all .2s ease;
81
  -o-transition: all .2s ease;
82
  transition: all .2s ease;
83
}
84
85
ul#nav>li:first-child>a, ul#nav>li:first-child {
86
  border-left: none;
87
  -webkit-border-radius: 4px 0 0 4px;
88
  -moz-border-radius: 4px 0 0 4px;
89
  border-radius: 4px 0 0 4px;
90
}
91
 
92
ul#nav li:last-child a, ul#nav li:last-child {
93
  border-right: none;
94
  -webkit-border-radius: 0 4px 4px 0;
95
  -moz-border-radius: 0 4px 4px 0;
96
  border-radius: 0 4px 4px 0;
97
}
98
 
99
/* 2nd Level */
100
 
101
ul#nav > li > ul {
102
  position: absolute;
103
  list-style: none;
104
  padding: 0;
105
  background: #cfcfcf;
106
  top: 55px;
107
  width: 230px;
108
  border-radius: 0 0 4px 4px;
109
  border: 1px solid #b3b3b3;
110
  overflow: hidden;
111
  opacity: 0;
112
  left: -999px;
113
114
 
115
}
116
 
117
ul#nav > li > ul > li {
118
  padding: 10px 0 10px 0;
119
  border-top: 1px solid #aaa;
120
  border-bottom: 1px solid #efefef;
121
122
  -webkit-transition: all .2s ease;
123
  -moz-transition: all .2s ease;
124
  -ms-transition: all .2s ease;
125
  -o-transition: all .2s ease;
126
  transition: all .2s ease;
127
}
128
 
129
ul#nav > li > ul > li:hover {
130
  background: #bbb;
131
  border-top: 1px solid #999;
132
  border-bottom: 1px solid #fff;
133
}
134
 
135
ul#nav > li > ul > li:hover a {
136
  color: white;
137
}
138
 
139
ul#nav > li > ul > li:first-child {
140
  border-top: none;
141
}
142
 
143
ul#nav > li > ul > li:last-child {
144
  border-bottom: none;
145
}
146
 
147
ul#nav > li > ul > li > a {
148
  color: #777;
149
  text-decoration: none;
150
  padding: 10px 20px 10px 15px;
151
  font: 12px Arial;
152
153
  -webkit-transition: all .2s ease;
154
  -moz-transition: all .2s ease;
155
  -ms-transition: all .2s ease;
156
  -o-transition: all .2s ease;
157
  transition: all .2s ease;
158
}
159
 
160
@-webkit-keyframes anim {
161
  0% { left:0; opacity: 0}
162
  100% {left: 0; top: 35px; opacity: 1}
163
}
164
 
165
@-moz-keyframes anim {
166
  0% { left:0; opacity: 0}
167
  100% {left: 0; top: 35px; opacity: 1}
168
}
169
 
170
@-ms-keyframes anim {
171
  0% { left:0; opacity: 0}
172
  100% {left: 0; top: 35px; opacity: 1}
173
}
174
 
175
@-o-keyframes anim {
176
  0% { left:0; opacity: 0}
177
  100% {left: 0; top: 35px; opacity: 1}
178
}
179
 
180
@keyframes anim {
181
  0% { left:0; opacity: 0}
182
  100% {left: 0; top: 35px; opacity: 1}
183
}
 

Two Level Superfishy Menu

CSSDeck G+