Ajax Loader
HTML 
<div id="container">
1
<div id="container">
2
    <div id="nav">
3
        <ul>
4
            <li><a href="#"><span>Dashboard</span></a></li>
5
            <li><a href="#"><span>Posts</span></a></li>
6
            <li class="dropdown"><a href="#"><span>Users</span></a>
7
                <ul>
8
                    <li><a href="#"><span>Joshua Hibbert</span></a></li>
9
                    <li><a href="#"><span>Kyle Bragger</span></a></li>
10
                    <li><a href="#"><span>Jack Rugile</span></a></li>
11
                </ul>
12
            </li>
13
            <li class="dropdown"><a href="#"><span>Settings</span></a>
14
                <ul>
15
                    <li><a href="#"><span>General</span></a></li>
16
                    <li><a href="#"><span>SEO</span></a></li>
17
                    <li><a href="#"><span>Style</span></a></li>
18
                    <li><a href="#"><span>Plugins</span></a></li>
19
                    <li><a href="#"><span>Security</span></a></li>
20
                </ul>
21
            </li>
22
            <li><a href="#"><span>View Site</span></a></li>
23
        </ul>
24
    </div>
25
</div>•
 
CSS 
/*============================*/
1
/*============================*/
2
/* General
3
/*============================*/
4
html, body {
5
    background: #fff;
6
    font: 100% helvetica, arial, sans-serif;
7
    margin: 0;
8
    padding: 0;
9
}
10
 
11
#container {          
12
    margin: 40px auto;
13
    width: 800px;  
14
    -webkit-border-radius: 3px;
15
    -moz-border-radius: 3px;
16
    border-radius: 3px;
17
}
18
 
19
#header {
20
    border-bottom: 1px solid #eee;          
21
    margin: 0 0 20px;
22
    overflow: hidden;
23
    padding: 0 0 10px;
24
}
25
 
26
h1 {          
27
    color: #111;
28
    float: left;
29
    font-size: 30px;
30
    font-weight: normal;
31
    letter-spacing: -1px;
32
    margin: 0;
33
}
34
 
35
h1 strong { font-weight: bold; }
36
 
37
h2 {
38
    color: #999;
39
    float: right;
40
    font-size: 11px;
41
    font-weight: normal;
42
    margin: 20px 0 0 0;
43
}
44
 
45
a {
46
    color: #111;
47
    font-weight: bold;
48
    text-decoration: none;
49
    -moz-transition: all 300ms ease-out;
50
    -webkit-transition: all 300ms ease-out;
51
    -ms-transition: all 300ms ease-out;
52
    transition: all 300ms ease-out;
53
}
54
 
55
a:hover {
56
    color: #555;  
57
}
58
 
59
/*============================*/
60
/* Main Navigation
61
/*============================*/
62
#nav {          
63
    height: 50px;
64
    line-height: 50px;          
65
    width: 100%;
66
}
67
 
68
#nav ul {
69
    list-style: none;
70
    margin: 0;
71
    padding: 0;
72
}
73
 
74
#nav li {  
75
    background: #333;
76
    background-image: -o-linear-gradient(bottom, #222222 0%, #555555 100%);
77
    background-image: -moz-linear-gradient(bottom, #222222 0%, #555555 100%);
78
    background-image: -webkit-linear-gradient(bottom, #222222 0%, #555555 100%);
79
    background-image: -ms-linear-gradient(bottom, #222222 0%, #555555 100%);  
80
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #222222),color-stop(1, #555555));  
81
    background-image: linear-gradient(bottom, #222222 0%, #555555 100%);
82
    float: left;
83
    position: relative;
84
    width: 20%;  
85
}
86
 
87
#nav li:first-child, #nav li:first-child a {
88
    -webkit-border-radius: 3px 0 0 3px;
89
    -moz-border-radius: 3px 0 0 3px;
90
    border-radius: 3px 0 0 3px;
91
}
92
#nav li:last-child, #nav li:last-child a {
93
    -webkit-border-radius: 0 3px 3px 0;
94
    -moz-border-radius: 0 3px 3px 0;
95
    border-radius: 0 3px 3px 0;
96
}
97
 
98
#nav a {              
99
    border-right: 1px solid #222;
100
    border-left: 1px solid #555;
101
    color: #ccc;
102
    display: block;
103
    font-size: 14px;
104
    height: 50px;
105
    overflow: hidden;
106
    text-align: center;
107
    text-shadow: 0 -1px 0 #000;  
108
    -webkit-box-shadow: inset 0 0 10px transparent;
109
    -moz-box-shadow: inset 0 0 10px transparent;
110
}
111
 
112
#nav a:after {
113
    background: rgba(255,255,255,.07);
114
    content: "";
115
    height: 25px;
116
    left: 0;
117
    position: absolute;
118
    width: 100%;
119
}
120
 
121
#nav li:hover > a {
122
    background: #333;
123
    border-left-color: #222;
124
    color: #fff;
125
    text-shadow: 0 1px 0 #000;
126
    -webkit-box-shadow: inset 0 0 10px #111;
127
    -moz-box-shadow: inset 0 0 10px #111;
128
    box-shadow: inset 0 0 10px #111;
129
}
130
#nav span {
131
    position: relative;  
132
}
133
 
134
#nav a:active span {
135
    color: #ffd;
136
    position: relative;
137
    top: 1px;
138
}
139
 
140
#nav li:first-child a {
141
    border-left: none;  
142
}
143
 
144
#nav li:last-child a {
145
    border-right: none;  
146
}
147
 
148
.dropdown > a span:after {
149
    border-top: 5px solid transparent;
150
    border-bottom: 5px solid transparent;
151
    border-left: 5px solid #ccc;
152
    content: "";
153
    right: -13px;
154
    position: absolute;
155
    top: 3px;
156
}
157
 
158
.dropdown:hover > a span:after {
159
    border-left: 5px solid transparent;
160
    border-right: 5px solid transparent;
161
    border-top: 5px solid #fff;
162
    content: "";
163
    right: -15px;
164
    position: absolute;
165
    top: 6px;
166
}
167
 
168
/*============================*/
169
/* Sub Navigation
170
/*============================*/
171
#nav ul ul {
172
    opacity: 0;
173
    position: absolute;
174
    top: 50px;
175
    visibility: hidden;
176
    width: 0;
177
    -moz-transition: all 300ms ease-out;
178
    -webkit-transition: all 300ms ease-out;
179
    -ms-transition: all 300ms ease-out;
180
    transition: all 300ms ease-out;
181
}
182
 
183
#nav ul li:hover ul {
184
    opacity: 1;
185
    visibility: visible;
186
    width: 100%;
187
}
188
 
189
#nav ul ul li {
190
    background: #f3f3f3;
191
    float: none;  
192
    line-height: 0;
193
    width: 100%;          
194
}
195
 
196
#nav ul ul li:nth-child(odd) {
197
    background: #eee;  
198
}
199
 
200
#nav ul ul li:first-child, #nav ul ul li:first-child a {
201
    -webkit-border-radius: 0;
202
    -moz-border-radius: 0;
203
    border-radius: 0;
204
}
205
#nav ul ul li:last-child, #nav ul ul li:last-child a {
206
    -webkit-border-radius: 0 0 3px 3px;
207
    -moz-border-radius: 0 0 3px 3px;
208
    border-radius: 0 0 3px 3px;
209
}
210
 
211
#nav ul ul li a {
212
    border-right: none;
213
    border-left: none;
214
    border-top: 1px solid #fff;
215
    color: #555;
216
    font-size: 12px;
217
    height: 36px;
218
    line-height: 36px;
219
    padding: 0 0 0 15px;
220
    text-align: left;
221
    text-shadow: 0 -1px 0 #eee;
222
}
223
 
224
#nav ul li ul li a:after {
225
    background: rgba(0,0,0,.02);
226
    content: "";
227
    height: 18px;
228
    left: 0;
229
    position: absolute;
230
    top: 19px;
231
    width: 100%;
232
}
233
 
234
#nav ul ul li a:hover {
235
    background: #ffd;
236
    color: #111;
237
    text-shadow: 0 1px 0 #fff;
238
    -webkit-box-shadow: none;
239
    -moz-box-shadow: none;
240
    box-shadow: none;
241
}
242
 
243
#nav ul ul a:active span {
244
    color: #111;
245
    position: relative;
246
    top: 1px;
247
}
248
 
249
•
 

Smooth Two Level CSS3 Navgation Menu

CSSDeck G+