Ajax Loader
HTML
<ul><li><a href="http://appnotised.com.au/reel"><img src="http://appnotised.com.au/wp-content/themes/twentytwelve/images/tvc.png" /></a>
1
<ul><li><a href="http://appnotised.com.au/reel"><img src="http://appnotised.com.au/wp-content/themes/twentytwelve/images/tvc.png" /></a>
2
    <ul>
3
      <li>reel</li>
4
      <li>archive</li>
5
    </ul>
6
  </li>
7
  <li><a href="http://appnotised.com.au/drama"><img src="http://appnotised.com.au/wp-content/themes/twentytwelve/images/drama.png" /></a>
8
    <ul>
9
      <li>cinema</li>
10
      <li>tv</li>
11
    </ul>
12
  </li>
13
    <li><a href="http://appnotised.com.au/about"><img src="http://appnotised.com.au/wp-content/themes/twentytwelve/images/about.png" /></a>
14
    <ul>
15
      <li>bio</li>
16
      <li>cv</li>
17
    </ul>
18
  </li>
19
      <li><a href="http://appnotised.com.au/"><img src="http://appnotised.com.au/wp-content/themes/twentytwelve/images/links.png" /></a>
20
    <ul>
21
      <li>vimeo</li>
22
      <li>press</li>
23
    </ul>
24
  </li>
25
  <li><a href="http://appnotised.com.au/contact"><img src="http://appnotised.com.au/wp-content/themes/twentytwelve/images/contact.png" /></a></li>
26
  <li><a href="http://appnotised.com.au/login"><img src="http://appnotised.com.au/wp-content/themes/twentytwelve/images/login.png" /></a></li>
27
</ul>
28
 
29
 
 
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: #ffffff;
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
  
16
 
17
}
18
ul li {
19
  font: bold 12px/18px sans-serif;
20
  display: inline-block;
21
  position: relative;
22
  padding: 5px 5px;
23
  background: #fff;
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
}
31
ul li:hover {
32
  background: #99D5FF;
33
  color: #000;
34
 
35
}
36
ul li ul {
37
  padding: 1;
38
 
39
  position: absolute;
40
  top: 55px;
41
  left: 0;
42
  width: 100px;
43
  -webkit-box-shadow: none;
44
  -moz-box-shadow: none;
45
  box-shadow: none;
46
  display: none;
47
  opacity: 0;
48
  visibility: hidden;
49
 
50
}
51
ul li ul li { 
52
  background: #99D5FF; 
53
  display: block; 
54
  color: #000;
55
 
56
}
57
ul li ul li:hover { background: #666; }
58
ul li:hover ul {
59
  display: block;
60
  opacity: 1;
61
  visibility: visible;
62
}
 

CSS Dropdown Menu

CSSDeck G+