Creating Menu with Sub Menu Below

Many bookmarking sites having lots of categories and sub categories use to have menus and their sub menus to show the items in these categories. In this post we will show you how to make menus with sub menus.

If there are categories having sub categories you can use sub menus below the main menu when a particular item of the main menu is clicked. Below we provided an example of creating a digg like menu that using rounded corners and sliding doors technique

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="topbar">
<a href="http://www.handycss.com/"><span>home</span></a>
<a href="http://www.handycss.com/tips/" ><span>CSS Tips</span></a>
<a href="http://www.handycss.com/effects/"><span>CSS Effects</span></a>
<a href="http://www.handycss.com/css-menus/"><span>CSS Menu</span></a>
</div>
<div id="middlebar">
<a href="http://www.handycss.com/wiki/"><span>CSS 1</span></a>
<a href="http://www.handycss.com/wiki/"><span>CSS 2</span></a>
<a href="http://www.handycss.com/wiki/"><span>CSS 3</span></a>
</div>

CSS:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
#topbar{
font-size:14px;
color:#3b5d14;
background:#b2d281;
font-weight:bold;
padding:6px;
overflow:auto;
height:5%;
clear:both;
}
#topbar a{
color:#3b5d14;
text-decoration:none;
margin:0 10px;
height:23px;
line-height:23px;
float:left;
display:block;
}
a.active{
height:23px;
line-height:23px;
background:url(pic/tb_a.png) right top no-repeat;
padding-right:10px;
}
a.active span{
background:url(pic/tb_span.png) left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}
#middlebar{
font-size:11px;
color:#3b5d14;
background:#90b557;
font-weight:bold;
padding:6px;
overflow:auto;
height:3%;
clear:both;
}
#middlebar a{
color:#3b5d14;
text-decoration:none;
margin:0 5px;
padding-right:10px;
height:23px;
line-height:23px;
display:block;
float:left;
background:url(pic/mb_a.png) right top no-repeat;
}
#middlebar a span{
background:url(pic/mb_span.png) left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}


Related posts

No Response

Post your response

Copyright © 2010 - 2014 Handy CSS Designed By Anotix, Powered By WordPress, all right reserved.