一款溢出式侧边栏导航菜单_网页代码站(www.webdm.cn)

1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
2   < html xmlns ="http://www.w3.org/1999/xhtml" >
3 < head >
4 < title > 一款溢出式侧边栏导航菜单_网页代码站(www.webdm.cn) title >
5 < style >
6 * { margin : 0 ; padding : 0 ; }
7 body { background : #FFF ; color : #000 ; text-align : center ; font : normal 12px Georgia, Arial, Helvetica, sans-serif ; }
8 a:link,a:visited { color : #369 ; text-decoration : underline ; }
9 a:hover { color : #C80000 ; text-decoration : none ; }
10 span,li,dt,dd,p,h1,h2,h3,h4,h5,h6 { text-align : left ; }
11 img { border : 0 ; }
12 ul,li { list-style-type : none ; }
13 p { line-height : 150% ; }
14 h1 { margin : 0 auto ; width : 100% ; background : #353535 font-size:28px ; height : 60px ; color : #FFF ; line-height : 60px ; text-indent : 60px ; overflow : hidden ; border-
15
16 bottom : 3px solid #999 ; }
17 #YMenu { margin : 30px auto ; width : 590px ; height : 450px ; overflow : hidden ; border : 3px solid #B0BEC7 ; padding : 4px ; }
18 #YMenu-side { position : relative ; z-index : 2 ; float : left ; width : 200px ; height : 450px ; border-right : 3px solid #B0BEC7 ; }
19 #YMenu-side h3 { float : left ; width : 196px ; clear : both ; line-height : 28px ; font-size : 14px ; text-indent : 10px ; color : #369 ; background-
20
21 color : #EAEFF5 ; overflow : hidden ; clear : both ; }
22 .YM-mainmnu { float : left ; width : 100% ; clear : both ; }
23 .YM-mainmnu li { position : relative ; z-index : 2 ; cursor : pointer ; float : left ; width : 180px ; clear : both ; min-height : 28px ; line-height : 28px ; text-
24
25 indent : 10px ; color : #999 ; }
26 .YM-mainmnu li.current { border-top : 1px solid #B0BEC7 ; border-left : 1px solid #B0BEC7 ; border-bottom : 2px solid #B0BEC7 ; border-right : 1px solid
27
28 #EAEFF5 ; background-color : #EAEFF5 ; }
29 .YM-mainmnu li.current a { font-size : 14px ; font-weight : bold ; color : #C80000 ; }
30 .YM-mainmnu li.current span { display : none ; }
31 .YM-mainmnu li .YM-submnu { position : absolute ; z-index : 3 ; left : 179px ; top : -1px ; display : none ; width : 200px ; overflow : hidden ; border : solid #B0BEC7 ; border-
32
33 width : 1px 2px 2px 0 ; background : #EAEFF5 url(../img/mnu-bg.gif) 0 0 no-repeat ; }
34 .YM-mainmnu li .YM-submnu li { float : left ; clear : none ; margin-left : 10px ; display : inline ; text-indent : 0 ; width : 90px ; overflow : hidden ; line-
35
36 height : 24px ; color : #000 ; border : 0 ; }
37 .YM-mainmnu li .YM-submnu li a { font-size : 12px ; font-weight : normal ; color : #369 ; }
38 #YMenu-main { position : relative ; z-index : 1 ; float : right ; width : 383px ; overflow : hidden ; }
39 #YMenu-main h2 { margin : 0 auto ; width : 100% ; height : 28px ; line-height : 28px ; background-color : #EAEFF5 ; font-size : 18px ; text-align : center ; overflow : hidden ; }
40 #YMenu-main p { margin : 10px auto ; width : 100% ; line-height : 150% ; font-size : 14px ; overflow : hidden ; text-indent : 28px ; }
41 .even { background-color : #F8F8F8 ; }
42 .odd { background-color : #EAEFF5 ; }
43 .hover { background-color : #B0BEC7 ; color : #FFF ; cursor : pointer ; }
44 .hidden { display : none ; clear : both ; }
45 #footer { margin : 0 auto ; width : 960px ; padding : 15px 0 ; overflow : hidden ; border-top : 1px solid #999 ; }
46 #footer p { margin : 0 auto ; padding : 5px 0 ; width : 960px ; line-height : 20px ; text-align : center ; font-size : 14px ; }
47 style >
48 head >
49 < body >
50 < h1 > YTabs！侧边栏导航菜单 h1 >
51 < div id ="YMenu" >
52 < div id ="YMenu-side" >
53 < h3 > 家用电器 h3 >
54 < ul class ="YM-mainmnu" >
55 < li class ="YM-Tab" >
56 < a href ="#" > 大家电 a >< span > - 电视机、平板电视... span >
57 < ul class ="YM-submnu" >
58 < li >< a href ="#1" > 洗衣机 a > li >
59 < li >< a href ="#1" > 平板电视 a > li >
60 < li >< a href ="#1" > 电热水器 a > li >
61 < li >< a href ="#1" > 家庭音响 a > li >
62 < li >< a href ="#1" > 燃气热水器 a > li >
63 < li >< a href ="#1" > 空调 a > li >
64 < li >< a href ="#1" > 冰箱冷柜 a > li >
65 < li >< a href ="#1" > DVD播放器 a > li >
66 < li >< a href ="#1" > 电视附件 a > li >
67 < li >< a href ="#1" > 家电服务 a > li >
68 < li >< a href ="#1" > 家电下乡 a > li >
69 ul >
70 li >
71 < li class ="YM-Tab" >
72 < a href ="#" > 大家电 a >< span > - 电视机、平板电视... span >
73 < ul class ="YM-submnu" >
74 < li >< a href ="#1" > 洗衣机 a > li >
75 < li >< a href ="#1" > 平板电视 a > li >
76 < li >< a href ="#1" > 电热水器 a > li >
77 < li >< a href ="#1" > 家庭音响 a > li >
78 < li >< a href ="#1" > 燃气热水器 a > li >
79 < li >< a href ="#1" > 空调 a > li >
80 < li >< a href ="#1" > 冰箱冷柜 a > li >
81 < li >< a href ="#1" > DVD播放器 a > li >
82 < li >< a href ="#1" > 电视附件 a > li >
83 < li >< a href ="#1" > 家电服务 a > li >
84 < li >< a href ="#1" > 家电下乡 a > li >
85 ul >
86 li >
87 < li class ="YM-Tab" >
88 < a href ="#" > 大家电 a >< span > - 电视机、平板电视... span >
89 < ul class ="YM-submnu" >
90 < li >< a href ="#1" > 洗衣机 a > li >
91 < li >< a href ="#1" > 平板电视 a > li >
92 < li >< a href ="#1" > 电热水器 a > li >
93 < li >< a href ="#1" > 家庭音响 a > li >
94 < li >< a href ="#1" > 燃气热水器 a > li >
95 < li >< a href ="#1" > 空调 a > li >
96 < li >< a href ="#1" > 冰箱冷柜 a > li >
97 < li >< a href ="#1" > DVD播放器 a > li >
98 < li >< a href ="#1" > 电视附件 a > li >
99 < li >< a href ="#1" > 家电服务 a > li >
100 < li >< a href ="#1" > 家电下乡 a > li >
101 ul >
102 li >
103 < li class ="YM-Tab" >
104 < a href ="#" > 大家电 a >< span > - 电视机、平板电视... span >
105 < ul class ="YM-submnu" >
106 < li >< a href ="#1" > 洗衣机 a > li >
107 < li >< a href ="#1" > 平板电视 a > li >
108 < li >< a href ="#1" > 电热水器 a > li >
109 < li >< a href ="#1" > 家庭音响 a > li >
110 < li >< a href ="#1" > 燃气热水器 a > li >
111 < li >< a href ="#1" > 空调 a > li >
112 < li >< a href ="#1" > 冰箱冷柜 a > li >
113 < li >< a href ="#1" > DVD播放器 a > li >
114 < li >< a href ="#1" > 电视附件 a > li >
115 < li >< a href ="#1" > 家电服务 a > li >
116 < li >< a href ="#1" > 家电下乡 a > li >
117 ul >
118 li >
119 ul >
120 < h3 > 手机数码 h3 >
121 < ul class ="YM-mainmnu" >
122 < li class ="YM-Tab" >
123 < a href ="#" > 大家电 a >< span > - 电视机、平板电视... span >
124 < ul class ="YM-submnu" >
125 < li >< a href ="#1" > 洗衣机 a > li >
126 < li >< a href ="#1" > 平板电视 a > li >
127 < li >< a href ="#1" > 电热水器 a > li >
128 < li >< a href ="#1" > 家庭音响 a > li >
129 < li >< a href ="#1" > 燃气热水器 a > li >
130 < li >< a href ="#1" > 空调 a > li >
131 < li >< a href ="#1" > 冰箱冷柜 a > li >
132 < li >< a href ="#1" > DVD播放器 a > li >
133 < li >< a href ="#1" > 电视附件 a > li >
134 < li >< a href ="#1" > 家电服务 a > li >
135 < li >< a href ="#1" > 家电下乡 a > li >
136 ul >
137 li >
138 < li class ="YM-Tab" >
139 < a href ="#" > 大家电 a >< span > - 电视机、平板电视... span >
140 < ul class ="YM-submnu" >
141 < li >< a href ="#1" > 洗衣机 a > li >
142 < li >< a href ="#1" > 平板电视 a > li >
143 < li >< a href ="#1" > 电热水器 a > li >
144 < li >< a href ="#1" > 家庭音响 a > li >
145 < li >< a href ="#1" > 燃气热水器 a > li >
146 < li >< a href ="#1" > 空调 a > li >
147 < li >< a href ="#1" > 冰箱冷柜 a > li >
148 < li >< a href ="#1" > DVD播放器 a > li >
149 < li >< a href ="#1" > 电视附件 a > li >
150 < li >< a href ="#1" > 家电服务 a > li >
151 < li >< a href ="#1" > 家电下乡 a > li >
152 ul >
153 li >
154 < li class ="YM-Tab" >
155 < a href ="#" > 大家电 a >< span > - 电视机、平板电视... span >
156 < ul class ="YM-submnu" >
157 < li >< a href ="#1" > 洗衣机 a > li >
158 < li >< a href ="#1" > 平板电视 a > li >
159 < li >< a href ="#1" > 电热水器 a > li >
160 < li >< a href ="#1" > 家庭音响 a > li >
161 < li >< a href ="#1" > 燃气热水器 a > li >
162 < li >< a href ="#1" > 空调 a > li >
163 < li >< a href ="#1" > 冰箱冷柜 a > li >
164 < li >< a href ="#1" > DVD播放器 a > li >
165 < li >< a href ="#1" > 电视附件 a > li >
166 < li >< a href ="#1" > 家电服务 a > li >
167 < li >< a href ="#1" > 家电下乡 a > li >
168 ul >
169 li >
170 < li class ="YM-Tab" >
171 < a href ="#" > 大家电 a >< span > - 电视机、平板电视... span >
172 < ul class ="YM-submnu" >
173 < li >< a href ="#1" > 洗衣机 a > li >
174 < li >< a href ="#1" > 平板电视 a > li >
175 < li >< a href ="#1" > 电热水器 a > li >
176 < li >< a href ="#1" > 家庭音响 a > li >
177 < li >< a href ="#1" > 燃气热水器 a > li >
178 < li >< a href ="#1" > 空调 a > li >
179 < li >< a href ="#1" > 冰箱冷柜 a > li >
180 < li >< a href ="#1" > DVD播放器 a > li >
181 < li >< a href ="#1" > 电视附件 a > li >
182 < li >< a href ="#1" > 家电服务 a > li >
183 < li >< a href ="#1" > 家电下乡 a > li >
184 ul >
185 li >
186 ul >
187 div >
188 div >
189 < script language ="javascript" type ="text/javascript" src ="http://www.webdm.cn/images/20090910/yao.js" > script >
190 < script language ="javascript" type ="text/javascript" >
191
198 script >
199 body >
200 html >
201 < br >
202 < a href ="http://www.webdm.cn" > 网页代码站 a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

文章来自：http://www.webdm.cn/webcode/6de11c91-90b8-42ce-8681-96b9e1459c91.html

 

转载于:https://www.cnblogs.com/webdm/archive/2010/12/25/1916550.html