純css實現(xiàn)的三級水平導(dǎo)航菜單

vscode練習(xí)使用開發(fā)純css的三級水平導(dǎo)航菜單揽咕。先上圖：

image

1、html5布局

[

復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> 1 <html>
2
3 <head>
4 <meta charset="UTF-8">
5 <title>水平導(dǎo)航菜單</title>
6 <link rel="stylesheet" href="reset.css">
7 <link rel="stylesheet" href="style.css">
8 </head>
9
10 <body>
11 <header class="header">
12 <nav class="menu radius">
13 <ul class="nav">
14 <li><a href="#">首頁</a></li>
15 <li>
16 <a href="#">菜單項</a>
17 <ul>
18 <li>
19 <a href="#">二級菜單項</a>
20 <ul>
21 <li><a href="#">三級菜單項</a></li>
22 <li><a href="#">三級菜單項</a></li>
23 <li><a href="#">三級菜單項</a></li>
24 <li><a href="#">三級菜單項</a></li>
25 <li><a href="#">三級菜單項</a></li>
26 </ul>
27 </li>
28 <li>
29 <a href="#">二級菜單項</a>
30 <ul>
31 <li><a href="#">三級菜單項</a></li>
32 <li><a href="#">三級菜單項</a></li>
33 <li><a href="#">三級菜單項</a></li>
34 <li><a href="#">三級菜單項</a></li>
35 <li><a href="#">三級菜單項</a></li>
36 </ul>
37 </li>
38 <li>
39 <a href="#">二級菜單項</a>
40 <ul>
41 <li><a href="#">三級菜單項</a></li>
42 <li><a href="#">三級菜單項</a></li>
43 <li><a href="#">三級菜單項</a></li>
44 <li><a href="#">三級菜單項</a></li>
45 <li><a href="#">三級菜單項</a></li>
46 </ul>
47 </li>
48 <li>
49 <a href="#">二級菜單項</a>
50 <ul>
51 <li><a href="#">三級菜單項</a></li>
52 <li><a href="#">三級菜單項</a></li>
53 <li><a href="#">三級菜單項</a></li>
54 <li><a href="#">三級菜單項</a></li>
55 <li><a href="#">三級菜單項</a></li>
56 </ul>
57 </li>
58 <li>
59 <a href="#">二級菜單項</a>
60 <ul>
61 <li><a href="#">三級菜單項</a></li>
62 <li><a href="#">三級菜單項</a></li>
63 <li><a href="#">三級菜單項</a></li>
64 <li><a href="#">三級菜單項</a></li>
65 <li><a href="#">三級菜單項</a></li>
66 </ul>
67 </li>
68 <li>
69 <a href="#">二級菜單項</a>
70 <ul>
71 <li><a href="#">三級菜單項</a></li>
72 <li><a href="#">三級菜單項</a></li>
73 <li><a href="#">三級菜單項</a></li>
74 <li><a href="#">三級菜單項</a></li>
75 <li><a href="#">三級菜單項</a></li>
76 </ul>
77 </li>
78 </ul>
79 </li>
80 <li>
81 <a href="#">菜單項</a>
82 <ul>
83 <li>
84 <a href="#">二級菜單項</a>
85 <ul>
86 <li><a href="#">三級菜單項</a></li>
87 <li><a href="#">三級菜單項</a></li>
88 <li><a href="#">三級菜單項</a></li>
89 <li><a href="#">三級菜單項</a></li>
90 <li><a href="#">三級菜單項</a></li>
91 </ul>
92 </li>
93 <li>
94 <a href="#">二級菜單項</a>
95 <ul>
96 <li><a href="#">三級菜單項</a></li>
97 <li><a href="#">三級菜單項</a></li>
98 <li><a href="#">三級菜單項</a></li>
99 <li><a href="#">三級菜單項</a></li>
100 <li><a href="#">三級菜單項</a></li>
101 </ul>
102 </li>
103 <li>
104 <a href="#">二級菜單項</a>
105 <ul>
106 <li><a href="#">三級菜單項</a></li>
107 <li><a href="#">三級菜單項</a></li>
108 <li><a href="#">三級菜單項</a></li>
109 <li><a href="#">三級菜單項</a></li>
110 <li><a href="#">三級菜單項</a></li>
111 </ul>
112 </li>
113 <li>
114 <a href="#">二級菜單項</a>
115 <ul>
116 <li><a href="#">三級菜單項</a></li>
117 <li><a href="#">三級菜單項</a></li>
118 <li><a href="#">三級菜單項</a></li>
119 <li><a href="#">三級菜單項</a></li>
120 <li><a href="#">三級菜單項</a></li>
121 </ul>
122 </li>
123 <li>
124 <a href="#">二級菜單項</a>
125 <ul>
126 <li><a href="#">三級菜單項</a></li>
127 <li><a href="#">三級菜單項</a></li>
128 <li><a href="#">三級菜單項</a></li>
129 <li><a href="#">三級菜單項</a></li>
130 <li><a href="#">三級菜單項</a></li>
131 </ul>
132 </li>
133 <li>
134 <a href="#">二級菜單項</a>
135 <ul>
136 <li><a href="#">三級菜單項</a></li>
137 <li><a href="#">三級菜單項</a></li>
138 <li><a href="#">三級菜單項</a></li>
139 <li><a href="#">三級菜單項</a></li>
140 <li><a href="#">三級菜單項</a></li>
141 </ul>
142 </li>
143 </ul>
144 </li>
145 <li>
146 <a href="#">菜單項</a>
147 <ul>
148 <li>
149 <a href="#">二級菜單項</a>
150 <ul>
151 <li><a href="#">三級菜單項</a></li>
152 <li><a href="#">三級菜單項</a></li>
153 <li><a href="#">三級菜單項</a></li>
154 <li><a href="#">三級菜單項</a></li>
155 <li><a href="#">三級菜單項</a></li>
156 </ul>
157 </li>
158 <li>
159 <a href="#">二級菜單項</a>
160 <ul>
161 <li><a href="#">三級菜單項</a></li>
162 <li><a href="#">三級菜單項</a></li>
163 <li><a href="#">三級菜單項</a></li>
164 <li><a href="#">三級菜單項</a></li>
165 <li><a href="#">三級菜單項</a></li>
166 </ul>
167 </li>
168 <li>
169 <a href="#">二級菜單項</a>
170 <ul>
171 <li><a href="#">三級菜單項</a></li>
172 <li><a href="#">三級菜單項</a></li>
173 <li><a href="#">三級菜單項</a></li>
174 <li><a href="#">三級菜單項</a></li>
175 <li><a href="#">三級菜單項</a></li>
176 </ul>
177 </li>
178 <li>
179 <a href="#">二級菜單項</a>
180 <ul>
181 <li><a href="#">三級菜單項</a></li>
182 <li><a href="#">三級菜單項</a></li>
183 <li><a href="#">三級菜單項</a></li>
184 <li><a href="#">三級菜單項</a></li>
185 <li><a href="#">三級菜單項</a></li>
186 </ul>
187 </li>
188 <li>
189 <a href="#">二級菜單項</a>
190 <ul>
191 <li><a href="#">三級菜單項</a></li>
192 <li><a href="#">三級菜單項</a></li>
193 <li><a href="#">三級菜單項</a></li>
194 <li><a href="#">三級菜單項</a></li>
195 <li><a href="#">三級菜單項</a></li>
196 </ul>
197 </li>
198 <li>
199 <a href="#">二級菜單項</a>
200 <ul>
201 <li><a href="#">三級菜單項</a></li>
202 <li><a href="#">三級菜單項</a></li>
203 <li><a href="#">三級菜單項</a></li>
204 <li><a href="#">三級菜單項</a></li>
205 <li><a href="#">三級菜單項</a></li>
206 </ul>
207 </li>
208 </ul>
209 </li>
210 <li>
211 <a href="#">菜單項</a>
212 <ul>
213 <li>
214 <a href="#">二級菜單項</a>
215 <ul>
216 <li><a href="#">三級菜單項</a></li>
217 <li><a href="#">三級菜單項</a></li>
218 <li><a href="#">三級菜單項</a></li>
219 <li><a href="#">三級菜單項</a></li>
220 <li><a href="#">三級菜單項</a></li>
221 </ul>
222 </li>
223 <li>
224 <a href="#">二級菜單項</a>
225 <ul>
226 <li><a href="#">三級菜單項</a></li>
227 <li><a href="#">三級菜單項</a></li>
228 <li><a href="#">三級菜單項</a></li>
229 <li><a href="#">三級菜單項</a></li>
230 <li><a href="#">三級菜單項</a></li>
231 </ul>
232 </li>
233 <li>
234 <a href="#">二級菜單項</a>
235 <ul>
236 <li><a href="#">三級菜單項</a></li>
237 <li><a href="#">三級菜單項</a></li>
238 <li><a href="#">三級菜單項</a></li>
239 <li><a href="#">三級菜單項</a></li>
240 <li><a href="#">三級菜單項</a></li>
241 </ul>
242 </li>
243 <li>
244 <a href="#">二級菜單項</a>
245 <ul>
246 <li><a href="#">三級菜單項</a></li>
247 <li><a href="#">三級菜單項</a></li>
248 <li><a href="#">三級菜單項</a></li>
249 <li><a href="#">三級菜單項</a></li>
250 <li><a href="#">三級菜單項</a></li>
251 </ul>
252 </li>
253 <li>
254 <a href="#">二級菜單項</a>
255 <ul>
256 <li><a href="#">三級菜單項</a></li>
257 <li><a href="#">三級菜單項</a></li>
258 <li><a href="#">三級菜單項</a></li>
259 <li><a href="#">三級菜單項</a></li>
260 <li><a href="#">三級菜單項</a></li>
261 </ul>
262 </li>
263 <li>
264 <a href="#">二級菜單項</a>
265 <ul>
266 <li><a href="#">三級菜單項</a></li>
267 <li><a href="#">三級菜單項</a></li>
268 <li><a href="#">三級菜單項</a></li>
269 <li><a href="#">三級菜單項</a></li>
270 <li><a href="#">三級菜單項</a></li>
271 </ul>
272 </li>
273 </ul>
274 </li>
470
471 </ul>
472 </nav>
473 </header>
474
475 </body>
476
477 </html></pre>

[

復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

2、導(dǎo)航菜單核心樣式表style.css

[

復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> 1 .header{
2 width:960px;
3 margin-left: auto;
4 margin-right: auto;
5 margin-top:30px;
6 margin-bottom:30px;
7 }
8 .menu{
9 background-color:#333333;
10 position: relative;
11 font-size: 14px;
12 }
13 .nav > li{
14 display: inline-block;
15 position: relative;
16 }
17 .nav > li > a{
18 padding-top:0.5em;
19 padding-bottom:0.5em;
20 padding-left: 2em;
21 padding-right: 2em;
22 text-decoration:none;
23 }
24 .nav > li:hover > a{
25 background-color:rgb(255, 255,0);
26 color:rgb(0, 0, 0);
27 }
28 .nav a{
29 color:#f5f5f5;
30 display: block;
31 text-decoration: none;
32 }
33 .nav ul{
34 display: none;
35 position:absolute;
36 background-color:transparent;
37 }
38 .nav ul li{
39 position:relative;
40 }
41 .nav ul li + li{
42 border-top: 1px solid rgb(70, 70, 70);
43 }
44
45 .nav > li:hover > ul{
46 display: block;
47 padding-top: 0.4em;
48 }
49 .nav > li > ul > li > a{
50 padding-top:0.4em;
51 padding-bottom:0.4em;
52 width: 10em;
53 padding-left: 1em;
54 padding-right: 1em;
55 background-color: rgb(50, 50, 50);
56 }
57 .nav > li > ul > li:hover > a{
58 background-color:rgb(255, 255,0);
59 color:rgb(0, 0, 0);
60 }
61 .nav > li > ul > li > ul{
62 left:100%;
63 top:0;
64 }
65 .nav > li:last-child > ul > li > ul{
66 left:-100%;
67 top:0;
68 }
69 .nav > li > ul > li:hover >ul {
70 display: block;
71 }
72 .nav > li > ul > li > ul > li > a{
73 padding-top:0.4em;
74 padding-bottom:0.4em;
75 width: 10em;
76 padding-left: 1em;
77 padding-right: 1em;
78 background-color: rgb(50, 50, 50);
79 }
80 .nav > li > ul > li > ul > li:hover > a{
81 background-color:rgb(255, 255,0);
82 color:rgb(0, 0, 0);
83 }</pre>

[

復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

3、全局樣式表reset.css

[

復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> 1 article,
2 aside,
3 details,
4 figcaption,
5 figure,
6 footer,
7 header,
8 hgroup,
9 main,
10 nav,
11 section,
12 summary {
13 display: block;
14 }
15
16 audio,
17 canvas,
18 video {
19 display: inline-block;
20 }
21
22 audio:not([controls]) {
23 display: none;
24 height: 0;
25 }
26
27 [hidden],
28 template {
29 display: none;
30 }
31
32 html {
33 -ms-text-size-adjust: 100%;
34 -webkit-text-size-adjust: 100%;
35 }
36
37 a {
38 background: transparent;
39 }
40
41 a:focus {
42 outline: thin dotted;
43 }
44
45 a:active,
46 a:hover {
47 outline: 0;
48 }
49
50 abbr[title] {
51 border-bottom: 1px dotted;
52 }
53
54 b,
55 strong {
56 font-weight: bold;
57 }
58
59 dfn {
60 font-style: italic;
61 }
62
63 hr {
64 -moz-box-sizing: content-box;
65 box-sizing: content-box;
66 height: 0;
67 }
68
69 mark {
70 background: #ff0;
71 color: #000;
72 }
73
74 code,
75 kbd,
76 pre,
77 samp {
78 font-family: monospace, serif;
79 font-size: 1em;
80 }
81
82 pre {
83 white-space: pre-wrap;
84 }
85
86 q {
87 quotes: "\201C" "\201D" "\2018" "\2019";
88 }
89
90 small {
91 font-size: 80%;
92 }
93
94 sub,
95 sup {
96 font-size: 75%;
97 line-height: 0;
98 position: relative;
99 vertical-align: baseline;
100 }
101
102 sup {
103 top: -0.5em;
104 }
105
106 sub {
107 bottom: -0.25em;
108 }
109
110 img {
111 border: 0;
112 }
113
114 svg:not(:root) {
115 overflow: hidden;
116 }
117
118 figure {
119 margin: 0;
120 }
121
122 fieldset {
123 border: 1px solid #c0c0c0;
124 margin: 0 2px;
125 padding: 0.35em 0.625em 0.75em;
126 }
127
128 legend {
129 border: 0;
130 padding: 0;
131 }
132
133 button, 134 input, 135 select, 136 textarea {
137 font-family: inherit;
138 font-size: 100%;
139 margin: 0;
140 }
141
142 button, 143 input {
144 line-height: normal;
145 }
146
147 button, 148 select {
149 text-transform: none;
150 }
151
152 button, 153 html input[type="button"], 154 input[type="reset"], 155 input[type="submit"] {
156 -webkit-appearance: button;
157 cursor: pointer;
158 }
159
160 button[disabled], 161 html input[disabled] {
162 cursor: default;
163 }
164
165 input[type="text"]:hover, 166 input[type="text"]:focus, 167 input[type="text"]:active {
168 border: 1px solid #CCC;
169 }
170
171 input[type="checkbox"], 172 input[type="radio"] {
173 box-sizing: border-box;
174 padding: 0;
175 }
176
177 input[type="search"] {
178 -webkit-appearance: textfield;
179 -moz-box-sizing: content-box;
180 -webkit-box-sizing: content-box;
181 box-sizing: content-box;
182 }
183
184 input[type="search"]::-webkit-search-cancel-button, 185 input[type="search"]::-webkit-search-decoration {
186 -webkit-appearance: none;
187 }
188
189 button::-moz-focus-inner, 190 input::-moz-focus-inner {
191 border: 0;
192 padding: 0;
193 }
194
195 textarea {
196 overflow: auto;
197 vertical-align: top;
198 }
199
200 table {
201 border-collapse: collapse;
202 border-spacing: 0;
203 }
204
205 body, 206 div, 207 ol, 208 ul, 209 li, 210 h1, 211 h2, 212 h3, 213 h4, 214 h5, 215 h6, 216 p, 217 span, 218 th, 219 td, 220 dl, 221 dd, 222 form, 223 fieldset, 224 legend, 225 input, 226 textarea, 227 select {
228 margin: 0 auto;
229 padding: 0;
230 border: 0;
231 }
232
233
234 /* Global /
235
236 body {
237 color: #444;
238 background: #FFF;
239 font: 12px/24px "Microsoft Yahei", Arial, Verdana, Tahoma, Sans-Serif;
240 }
241
242 ul, 243 ol, 244 li {
245 list-style: none;
246 }
247
248 table, 249 td, 250 th, 251 input {
252 font-size: 12px;
253 }
254
255 h1, 256 h2, 257 h3, 258 h4, 259 h5, 260 h6 {
261 font-weight: normal;
262 }
263
264 h1 {
265 font-size: 28px;
266 }
267
268 h2 {
269 font-size: 18px;
270 }
271
272 h3 {
273 font-size: 16px;
274 }
275
276 h4 {
277 font-size: 14px;
278 }
279
280 h5, 281 h6 {
282 font-size: 12px;
283 }
284
285 .inner {
286 overflow: hidden;
287 }
288
289 .clearfix {
290 clear: both;
291 font-size: 1px;
292 width: 1px;
293 height: 0;
294 visibility: hidden;
295 margin-top: 0px!important;
296 margin-top: -1px;
297 line-height: 0 298 }
299
300 .radius {
301 border-radius: 3px;
302 -moz-border-radius: 3px;
303 -webkit-border-radius: 3px;
304 }
305
306 .opacity {
307 opacity: 0.5;
308 filter: "alpha(opacity=50)";
309 filter: alpha(opacity=50);
310 }
311
312 .folio-thumb img {
313 width: 100%;
314 -webkit-backface-visibility: hidden;
315 -moz-backface-visibility: hidden;
316 -ms-backface-visibility: hidden;
317 backface-visibility: hidden;
318 -webkit-transition-duration: 0.7s;
319 -moz-transition-duration: 0.7s;
320 -ms-transition-duration: 0.7s;
321 -o-transition-duration: 0.7s;
322 }
323
324 .folio-thumb:hover img {
325 -webkit-transform: scale(1.3);
326 -moz-transform: scale(1.3);
327 -o-transform: scale(1.3);
328 -ms-transform: scale(1.3);
329 }
330
331 .mediaholder {
332 overflow: hidden;
333 }
334
335 a:link, 336 a:visited {
337 color: #444;
338 outline: 0;
339 text-decoration: none;
340 }
341
342 a:hover {
343 color: #005BB5;
344 text-decoration: underline;
345 / -webkit-transition:color 0.4s ease; -moz-transition:color 0.4s ease; -o-transition:color 0.4s ease; -ms-transition:color 0.4s ease; transition: color 0.4s ease;/
346 }</pre>

[

復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末傲宜，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子蛹头，更是在濱河造成了極大的恐慌，老刑警劉巖戏溺，帶你破解...
沈念sama閱讀 211,194評論 6贊 490
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件渣蜗，死亡現(xiàn)場離奇詭異，居然都是意外死亡旷祸，警方通過查閱死者的電腦和手機耕拷，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,058評論 2贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來托享，“玉大人骚烧，你說我怎么就攤上這事∪蛭В” “怎么了赃绊？”我有些...
開封第一講書人閱讀 156,780評論 0贊 346
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長辫诅。經(jīng)常有香客問我凭戴，道長涧狮，這世上最難降的妖魔是什么炕矮？我笑而不...
開封第一講書人閱讀 56,388評論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任么夫，我火速辦了婚禮，結(jié)果婚禮上肤视，老公的妹妹穿的比我還像新娘档痪。我一直安慰自己，他們只是感情好邢滑，可當(dāng)我...
茶點故事閱讀 65,430評論 5贊 384
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布腐螟。她就那樣靜靜地躺著，像睡著了一般困后。火紅的嫁衣襯著肌膚如雪乐纸。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,764評論 1贊 290
城市分裂傳說
那天摇予，我揣著相機與錄音汽绢，去河邊找鬼。笑死侧戴，一個胖子當(dāng)著我的面吹牛宁昭，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播酗宋，決...
沈念sama閱讀 38,907評論 3贊 406
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼积仗，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了蜕猫？” 一聲冷哼從身側(cè)響起寂曹，我...
開封第一講書人閱讀 37,679評論 0贊 266
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎回右，沒想到半個月后稀颁，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 44,122評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡楣黍，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,459評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年匾灶，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片租漂。...
茶點故事閱讀 38,605評論 1贊 340
活死人
序言：一個原本活蹦亂跳的男人離奇死亡阶女，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出哩治，到底是詐尸還是另有隱情秃踩，我是刑警寧澤，帶...
沈念sama閱讀 34,270評論 4贊 329
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布业筏，位于F島的核電站憔杨，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏蒜胖。R本人自食惡果不足惜消别，卻給世界環(huán)境...
茶點故事閱讀 39,867評論 3贊 312
男人毒藥：我在死后第九天來索命
文/蒙蒙一抛蚤、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧寻狂，春花似錦岁经、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,734評論 0贊 21
一樁弒父案缀壤，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至纠亚，卻和暖如春塘慕，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背蒂胞。一陣腳步聲響...
開封第一講書人閱讀 31,961評論 1贊 265
情欲美人皮
我被黑心中介騙來泰國打工苍糠，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人啤誊。一個月前我還...
沈念sama閱讀 46,297評論 2贊 360
代替公主和親
正文我出身青樓岳瞭，卻偏偏與公主長得像，于是被迫代替她去往敵國和親蚊锹。傳聞我的和親對象是個殘疾皇子瞳筏，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,472評論 2贊 348

純css實現(xiàn)的三級水平導(dǎo)航菜單

純css實現(xiàn)的三級水平導(dǎo)航菜單

推薦閱讀更多精彩內(nèi)容