We have our custom header navigation up and running, but at the moment it just looks like a boring old list of links that unfortunately, are aesthetically unappealing. To fix this, we will create a class called
nav in our style.css.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .nav{ width:750px; background: #000; display:block; float:left; position:relative;}.nav ul{ list-style:none;}.nav li{ float:left; position:relative;} |
As you can see in our
.nav we have made some basic declarations, such as the width of the navigation, background, where it will align, as well as the display value. Next we style the basic unordered list by just making sure that no bullets are shown with our links. For our list we float the items to the left, as well as position it relative.
Now we will finish the styling of our navigation by adding styles to the links and dropdown menus.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| .nav a{ display:block; text-decoration:none; color:#fff; padding:0 15px 10px 0; font-size:13px; font-weight:bold;}.nav ul ul{ display:none; position:absolute; top:100%; left:0; float:left; z-index:99999; background: #212121;}.nav ul ul ul{ top: 30%; left:100%; background: #343434;}.nav ul ul a{ height:auto; line-height:1em; padding:10px; width:130px;}.nav li:hover > a,.nav ul ul:hover > a{ color:#ccc;}.nav ul li:hover > ul{ display:block;} |
No comments:
Post a Comment