Ajax Loader
×
HTML 
<ul id="menu">
1
<ul id="menu">
2
  <li>
3
    <a href="#">Parent 1</a>
4
    <ul>
5
      <li>
6
        <a href="#">Child A</a>
7
      </li>
8
      <li>
9
        <a href="#">Child B</a>
10
      </li>
11
      <li>
12
        <a href="#">Child C</a>
13
      </li>
14
    </ul>
15
  <li>
16
  <li>
17
    <a href="#">Parent 2</a>
18
    <ul>
19
      <li>
20
        <a href="#">Child D</a>
21
      </li>
22
      <li>
23
        <a href="#">Child E</a>
24
      </li>
25
      <li>
26
        <a href="#">Child F</a>
27
      </li>
28
      <li>
29
        <a href="#">Child G</a>
30
      </li>
31
    </ul>
32
  <li>
33
  <li>
34
    <a href="#">Parent 3</a>
35
    <ul>
36
      <li>
37
        <a href="#">Child H</a>
38
      </li>
39
      <li>
40
        <a href="#">Child I</a>
41
      </li>
42
      <li>
43
        <a href="#">Child J</a>
44
      </li>
45
      <li>
46
        <a href="#">Child K</a>
47
      </li>
48
      <li>
49
        <a href="#">Child L</a>
50
      </li>
51
    </ul>
52
  <li>
53
  <li>
54
    <a href="#">Parent 4</a>
55
    <ul>
56
      <li>
57
        <a href="#">Child M</a>
58
      </li>
59
      <li>
60
        <a href="#">Child N</a>
61
      </li>
62
      <li>
63
        <a href="#">Child O</a>
64
      </li>
65
      <li>
66
        <a href="#">Child P</a>
67
      </li>
68
      <li>
69
        <a href="#">Child Q</a>
70
      </li>
71
      <li>
72
        <a href="#">Child R</a>
73
      </li>
74
    </ul>
75
  <li>
76
</ul>
 
CSS 
/**
1
/**
2
 * Skyrim-inspired Menu
3
 */
4
 
5
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
6
 
7
html {
8
  background: #333 url(http://subtlepatterns.com/patterns/tex2res4.png) 0 0 repeat;
9
  min-height: 100%;
10
  font-family: "Open Sans", sans-serif;
11
  font-weight: 300;
12
  color: #FFF;
13
}
14
 
15
body, html {
16
  height: 100%;
17
  margin: 0;
18
  padding: 0;
19
}
20
 
21
a {
22
  color: rgba(255, 255, 255, 0.6);
23
  text-decoration: none;
24
}
25
 
26
  a:hover, li:hover > a {
27
    color: #FFF;
28
  }
29
 
30
ul {
31
  list-style-type: none;
32
  margin: 0;
33
  padding: 0;
34
}
35
 
36
li {
37
  margin: 0;
38
  padding: 0;
39
}
40
 
41
#menu {
42
  border-left: 1px solid #FFF;
43
  border-right: 1px solid #FFF;
44
  background: rgba(0, 0, 0, 0.5);
45
  float: left;
46
  font-size: 1.5em;
47
  min-height: 100%;
48
  margin-left: 1em;
49
}
50
 
51
#menu li {
52
  position: relative;
53
  z-index: 1;
54
}
55
 
56
#menu li a {
57
  display: block;
58
  padding: 0.5em 1em;
59
  white-space: nowrap;
60
}
61
 
62
  #menu li ul {
63
    position: absolute;
64
    overflow: hidden;
65
    display: none;
66
    left: 100%;
67
    top: 0.5em;
68
    float: none;
69
    background-image: -moz-radial-gradient(0 50%, ellipse  farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 100%);
70
    background-image: -webkit-radial-gradient(0 50%, ellipse  farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 100%);
71
    background-image: radial-gradient(0 50%, ellipse  farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 100%);
72
  }
73
74
  #menu li:hover ul {
75
    display: block;
76
  }
77
78
  #menu li ul a {
79
    position: relative;
80
    font-size: 0.8em;
81
  }
82
83
  #menu li ul a:hover:before {
84
    content: "";
85
    display: block;
86
    width: 1em;
87
    height: 1em;
88
    background: rgba(0,0,0,0.75);
89
    border: 1px solid #FFF;
90
    position: absolute;
91
    top: 0.5em;
92
    left: -0.75em;
93
    -moz-transform: rotate(5deg);
94
    -webkit-transform: rotate(45deg);
95
    transform: rotate(45deg);
96
  }
 

Untitled

CSSDeck G+