Ajax Loader
×

Untitled

HTML
<nav>
1
<nav>
2
    <ul class="cf">
3
        <li><a class="dropdown" href="#">Menu Item 2</a>
4
            <ul>
5
                <li><a href="#">Sub-menu Item 1</a></li>
6
                <li><a href="#">Sub-menu Item 2</a></li>
7
                <li><a href="#">Sub-menu Item 3</a></li>
8
            </ul>
9
            </li>
10
    </ul>
11
</nav>
 
CSS
nav ul {
1
nav ul {
2
  -webkit-font-smoothing:antialiased;
3
  text-shadow:0 1px 0 #FFF;
4
    background: #ddd;
5
    list-style: none;
6
    margin: 0;
7
    padding: 0;
8
    width: 100%;
9
}
10
nav li {
11
    float: left;
12
    margin: 0;
13
    padding: 0;
14
    position: relative;
15
    min-width: 25%;
16
}
17
nav a {
18
    background: #ddd;
19
    color: #444;
20
    display: block;
21
    font: bold 16px/50px sans-serif;
22
    padding: 0 25px;
23
    text-align: center;
24
    text-decoration: none;
25
    -webkit-transition: all .25s ease;
26
       -moz-transition: all .25s ease;
27
        -ms-transition: all .25s ease;
28
         -o-transition: all .25s ease;
29
            transition: all .25s ease;
30
}
31
nav .dropdown:after {
32
    content: ' ▶';
33
}
34
nav .dropdown:hover:after{
35
  content:'\25bc'
36
}
37
nav li:hover a {
38
    background: #ccc;
39
}
40
nav li ul {
41
    float: left;
42
    left: 0;
43
    opacity: 0;
44
    position: absolute;
45
    top: 35px;
46
    visibility: hidden;
47
    z-index: 1;
48
    -webkit-transition: all .25s ease;
49
       -moz-transition: all .25s ease;
50
        -ms-transition: all .25s ease;
51
         -o-transition: all .25s ease;
52
            transition: all .25s ease;
53
}
54
nav li:hover ul {
55
    opacity: 1;
56
    top: 50px;
57
    visibility: visible;
58
}
59
nav li ul li {
60
    float: none;
61
    width: 100%;
62
}
63
nav li ul a:hover {
64
    background: #bbb;
65
}
66
 
67
/* Clearfix */
68
 
69
.cf:after, .cf:before {
70
    content:"";
71
    display:table;
72
}
73
.cf:after {
74
    clear:both;
75
}
76
.cf {
77
    zoom:1;
78
}
 

Untitled

CSSDeck G+