質問編集履歴

2

体裁の修正

2020/08/18 04:57

投稿

mimizuk
mimizuk

スコア8

test CHANGED
File without changes
test CHANGED
@@ -140,431 +140,533 @@
140
140
 
141
141
  ```
142
142
 
143
+ ```
144
+
143
- ```sm-blue.css
145
+ /sm-blue.css
146
+
147
+
148
+
149
+ .sm-blue {
150
+
151
+ background: #ffd900; /* Old browsers */
152
+
153
+ background: -moz-linear-gradient(top, #ffd900 0%, #ffdb14 100%); /* FF3.6+ */
154
+
155
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd900), color-stop(100%,#ffdb14)); /* Chrome,Safari4+ */
156
+
157
+ background: -webkit-linear-gradient(top, #ffd900 0%,#ffdb14 100%); /* Chrome10+,Safari5.1+ */
158
+
159
+ background: -o-linear-gradient(top, #ffd900 0%,#ffdb14 100%); /* Opera 11.10+ */
160
+
161
+ background: -ms-linear-gradient(top, #ffd900 0%,#ffdb14 100%); /* IE10+ */
162
+
163
+ background: linear-gradient(to bottom, #ffd900 0%,#ffdb14 100%); /* W3C */
164
+
165
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd900', endColorstr='#ffdb14',GradientType=0 ); /* IE6-9 */
166
+
167
+ -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3);
168
+
169
+ -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3);
170
+
171
+ box-shadow:0 1px 1px rgba(0,0,0,0.3);
172
+
173
+ }
174
+
175
+
176
+
177
+ .sm-blue ul {
178
+
179
+ border:1px solid #a9a9a9;
180
+
181
+ padding:7px 0;
182
+
183
+ background:#fff;
184
+
185
+ -moz-border-radius:0 0 4px 4px;
186
+
187
+ -webkit-border-radius:0 0 4px 4px;
188
+
189
+ border-radius:0 0 4px 4px;
190
+
191
+ -moz-box-shadow:0 5px 12px rgba(0,0,0,0.3);
192
+
193
+ -webkit-box-shadow:0 5px 12px rgba(0,0,0,0.3);
194
+
195
+ box-shadow:0 5px 12px rgba(0,0,0,0.3);
196
+
197
+ }
198
+
199
+
200
+
201
+
202
+
203
+ /* Menu items
204
+
205
+ ===================*/
206
+
207
+
208
+
209
+ .sm-blue a {
210
+
211
+ padding:10px 0 14px;
212
+
213
+ color:#333;
214
+
215
+ line-height:23px;
216
+
217
+ font-family:"PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
218
+
219
+ font-weight:bold;
220
+
221
+ text-decoration:none;
222
+
223
+ text-shadow:0 1px 0 rgba(0,0,0,0.3);
224
+
225
+ text-transform: capitalize;
226
+
227
+ }
228
+
229
+
230
+
231
+ .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
232
+
233
+ background: #f8b500; /* Old browsers */
234
+
235
+ background: -moz-linear-gradient(top, #f8b500 0%, #f7b613 100%); /* FF3.6+ */
236
+
237
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8b500), color-stop(100%,#f7b613)); /* Chrome,Safari4+ */
238
+
239
+ background: -webkit-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* Chrome10+,Safari5.1+ */
240
+
241
+ background: -o-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* Opera 11.10+ */
242
+
243
+ background: -ms-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* IE10+ */
244
+
245
+ background: linear-gradient(to bottom, #f8b500 0%,#f7b613 100%); /* W3C */
246
+
247
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b500', endColorstr='#f7b613',GradientType=0 ); /* IE6-9 */
248
+
249
+ color:#333;
250
+
251
+ }
252
+
253
+
254
+
255
+ .sm-blue ul a {
256
+
257
+ padding:9px 40px 8px 23px;
258
+
259
+ background:transparent;
260
+
261
+ color:#637d4d;
262
+
263
+ font-size:16px;
264
+
265
+ text-shadow:none;
266
+
267
+ }
268
+
269
+
270
+
271
+ .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted {
272
+
273
+ background: #f8b500; /* Old browsers */
274
+
275
+ background: -moz-linear-gradient(top, #f8b500 0%, #f7b613 100%); /* FF3.6+ */
276
+
277
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8b500), color-stop(100%,#f7b613)); /* Chrome,Safari4+ */
278
+
279
+ background: -webkit-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* Chrome10+,Safari5.1+ */
280
+
281
+ background: -o-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* Opera 11.10+ */
282
+
283
+ background: -ms-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* IE10+ */
284
+
285
+ background: linear-gradient(to bottom, #f8b500 0%,#f7b613 100%); /* W3C */
286
+
287
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b500', endColorstr='#f7b613',GradientType=0 ); /* IE6-9 */
288
+
289
+ color:#fff;
290
+
291
+ text-shadow:0 1px 0 rgba(0,0,0,0.3);
292
+
293
+ }
294
+
295
+
296
+
297
+
298
+
299
+ /* Sub menu indicators
300
+
301
+ ===================*/
302
+
303
+
304
+
305
+ .sm-blue a span.sub-arrow {
306
+
307
+ position:absolute;
308
+
309
+ bottom:2px;
310
+
311
+ left:50%;
312
+
313
+ margin-left:-5px;
314
+
315
+ /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
316
+
317
+ width:0;
318
+
319
+ height:0;
320
+
321
+ overflow:hidden;
322
+
323
+ border-width:5px; /* tweak size of the arrow */
324
+
325
+ border-style:solid dashed dashed dashed;
326
+
327
+ border-color:#333 transparent transparent transparent;
328
+
329
+ }
330
+
331
+
332
+
333
+ .sm-blue-vertical a span.sub-arrow, .sm-blue ul a span.sub-arrow {
334
+
335
+ bottom:auto;
336
+
337
+ top:50%;
338
+
339
+ margin-top:-5px;
340
+
341
+ right:15px;
342
+
343
+ left:auto;
344
+
345
+ margin-left:0;
346
+
347
+ border-style:dashed dashed dashed solid;
348
+
349
+ border-color:transparent transparent transparent #aaa;
350
+
351
+ }
352
+
353
+
354
+
355
+ /* Items separators
356
+
357
+ ===================*/
358
+
359
+
360
+
361
+ .sm-blue li {
362
+
363
+ border-left:1px solid #f8b500;
364
+
365
+ }
366
+
367
+
368
+
369
+ .sm-blue li:first-child, .sm-blue-vertical li, .sm-blue ul li {
370
+
371
+ border-left:0;
372
+
373
+ }
374
+
375
+
376
+
377
+ /* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package
378
+
379
+ ===================*/
380
+
381
+
382
+
383
+ .sm-blue span.scroll-up, .sm-blue span.scroll-down {
384
+
385
+ position:absolute;
386
+
387
+ display:none;
388
+
389
+ visibility:hidden;
390
+
391
+ overflow:hidden;
392
+
393
+ background:#ffffff;
394
+
395
+ height:20px;/* width and position will be automatically set by the script */
396
+
397
+ }
398
+
399
+
400
+
401
+ .sm-blue span.scroll-up-arrow, .sm-blue span.scroll-down-arrow {
402
+
403
+ position:absolute;
404
+
405
+ top:-2px;
406
+
407
+ left:50%;
408
+
409
+ margin-left:-8px;
410
+
411
+ /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
412
+
413
+ width:0;
414
+
415
+ height:0;
416
+
417
+ overflow:hidden;
418
+
419
+ border-width:8px; /* tweak size of the arrow */
420
+
421
+ border-style:dashed dashed solid dashed;
422
+
423
+ border-color:transparent transparent #637d4d transparent;
424
+
425
+ }
426
+
427
+
428
+
429
+ .sm-blue span.scroll-down-arrow {
430
+
431
+ top:6px;
432
+
433
+ border-style:solid dashed dashed dashed;
434
+
435
+ border-color:#637d4d transparent transparent transparent;
436
+
437
+ }
438
+
439
+
440
+
441
+
442
+
443
+ /*
444
+
445
+ ---------------------------------------------------------------
446
+
447
+ Responsiveness
448
+
449
+ These will make the sub menus collapsible when the screen width is too small.
450
+
451
+ ---------------------------------------------------------------*/
452
+
453
+
454
+
455
+
456
+
457
+ /* decrease horizontal main menu items left/right padding to avoid wrapping */
458
+
459
+ @media screen and (min-width: 1130px) {
460
+
461
+ .menutop {
462
+
463
+ width: 19.85%;
464
+
465
+ text-align: center;
466
+
467
+ font-size: 18px;
468
+
469
+ }
470
+
471
+ }
472
+
473
+ @media screen and (min-width: 769px) and (max-width: 1129px) {
474
+
475
+ .menutop {
476
+
477
+ width: 19.7%;
478
+
479
+ text-align: center;
480
+
481
+ font-size: 15px;
482
+
483
+ }
484
+
485
+ }
486
+
487
+ @media screen and (min-width: 481px) and (max-width: 768px) {
488
+
489
+ .menutop {
490
+
491
+ width: 19.5%;
492
+
493
+ text-align: center;
494
+
495
+ font-size: 13px;
496
+
497
+ }
498
+
499
+ }
500
+
501
+ @media screen and (max-width: 480px) {
502
+
503
+
504
+
505
+ /* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
506
+
507
+ ul.sm-blue {
508
+
509
+ width:auto !important;
510
+
511
+ margin: 10px !important;
512
+
513
+ margin-top: 250px !important;
514
+
515
+ }
516
+
517
+
518
+
519
+ ul.sm-blue ul {
520
+
521
+ display:none;
522
+
523
+ position:static !important;
524
+
525
+ top:auto !important;
526
+
527
+ left:auto !important;
528
+
529
+ margin-left:0 !important;
530
+
531
+ margin-top:0 !important;
532
+
533
+ width:auto !important;
534
+
535
+ min-width:0 !important;
536
+
537
+ max-width:none !important;
538
+
539
+ }
540
+
541
+
542
+
543
+ ul.sm-blue>li {
544
+
545
+ float:none;
546
+
547
+ }
548
+
549
+
550
+
551
+ ul.sm-blue>li>a, ul.sm-blue ul.sm-nowrap>li>a {
552
+
553
+ white-space:normal;
554
+
555
+ }
556
+
557
+
558
+
559
+ ul.sm-blue iframe {
560
+
561
+ display:none;
562
+
563
+ }
564
+
565
+
144
566
 
145
567
  /
146
568
 
147
569
 
148
570
 
149
- .sm-blue {
150
-
151
- background: #ffd900; /* Old browsers */
152
-
153
- background: -moz-linear-gradient(top, #ffd900 0%, #ffdb14 100%); /* FF3.6+ */
154
-
155
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd900), color-stop(100%,#ffdb14)); /* Chrome,Safari4+ */
156
-
157
- background: -webkit-linear-gradient(top, #ffd900 0%,#ffdb14 100%); /* Chrome10+,Safari5.1+ */
158
-
159
- background: -o-linear-gradient(top, #ffd900 0%,#ffdb14 100%); /* Opera 11.10+ */
160
-
161
- background: -ms-linear-gradient(top, #ffd900 0%,#ffdb14 100%); /* IE10+ */
162
-
163
- background: linear-gradient(to bottom, #ffd900 0%,#ffdb14 100%); /* W3C */
164
-
165
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd900', endColorstr='#ffdb14',GradientType=0 ); /* IE6-9 */
166
-
167
- -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3);
168
-
169
- -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3);
170
-
171
- box-shadow:0 1px 1px rgba(0,0,0,0.3);
172
-
173
- }
174
-
175
-
176
-
177
- .sm-blue ul {
178
-
179
- border:1px solid #a9a9a9;
180
-
181
- padding:7px 0;
182
-
183
- background:#fff;
184
-
185
- -moz-border-radius:0 0 4px 4px;
186
-
187
- -webkit-border-radius:0 0 4px 4px;
188
-
189
- border-radius:0 0 4px 4px;
190
-
191
- -moz-box-shadow:0 5px 12px rgba(0,0,0,0.3);
192
-
193
- -webkit-box-shadow:0 5px 12px rgba(0,0,0,0.3);
194
-
195
- box-shadow:0 5px 12px rgba(0,0,0,0.3);
196
-
197
- }
198
-
199
-
200
-
201
-
202
-
203
- /* Menu items
204
-
205
- ===================*/
206
-
207
-
208
-
209
- .sm-blue a {
210
-
211
- padding:10px 0 14px;
212
-
213
- color:#333;
214
-
215
- line-height:23px;
216
-
217
- font-family:"PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
218
-
219
- font-weight:bold;
220
-
221
- text-decoration:none;
222
-
223
- text-shadow:0 1px 0 rgba(0,0,0,0.3);
224
-
225
- text-transform: capitalize;
226
-
227
- }
228
-
229
-
230
-
231
- .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
232
-
233
- background: #f8b500; /* Old browsers */
234
-
235
- background: -moz-linear-gradient(top, #f8b500 0%, #f7b613 100%); /* FF3.6+ */
236
-
237
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8b500), color-stop(100%,#f7b613)); /* Chrome,Safari4+ */
238
-
239
- background: -webkit-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* Chrome10+,Safari5.1+ */
240
-
241
- background: -o-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* Opera 11.10+ */
242
-
243
- background: -ms-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* IE10+ */
244
-
245
- background: linear-gradient(to bottom, #f8b500 0%,#f7b613 100%); /* W3C */
246
-
247
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b500', endColorstr='#f7b613',GradientType=0 ); /* IE6-9 */
248
-
249
- color:#333;
250
-
251
- }
252
-
253
-
254
-
255
- .sm-blue ul a {
256
-
257
- padding:9px 40px 8px 23px;
258
-
259
- background:transparent;
260
-
261
- color:#637d4d;
262
-
263
- font-size:16px;
264
-
265
- text-shadow:none;
266
-
267
- }
268
-
269
-
270
-
271
- .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted {
272
-
273
- background: #f8b500; /* Old browsers */
274
-
275
- background: -moz-linear-gradient(top, #f8b500 0%, #f7b613 100%); /* FF3.6+ */
276
-
277
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8b500), color-stop(100%,#f7b613)); /* Chrome,Safari4+ */
278
-
279
- background: -webkit-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* Chrome10+,Safari5.1+ */
280
-
281
- background: -o-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* Opera 11.10+ */
282
-
283
- background: -ms-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* IE10+ */
284
-
285
- background: linear-gradient(to bottom, #f8b500 0%,#f7b613 100%); /* W3C */
286
-
287
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b500', endColorstr='#f7b613',GradientType=0 ); /* IE6-9 */
288
-
289
- color:#fff;
290
-
291
- text-shadow:0 1px 0 rgba(0,0,0,0.3);
292
-
293
- }
294
-
295
-
296
-
297
-
298
-
299
- /* Sub menu indicators
300
-
301
- ===================*/
302
-
303
-
304
-
305
- .sm-blue a span.sub-arrow {
571
+
572
+
573
+
574
+
575
+
576
+
577
+ ```
578
+
579
+ ```
580
+
581
+ sm-core-css.css
582
+
583
+
584
+
585
+ .sm, .sm ul, .sm li {
586
+
587
+ display:block;
588
+
589
+ list-style:none;
590
+
591
+ padding:0;
592
+
593
+ margin:0;
594
+
595
+ line-height:normal;
596
+
597
+ direction:ltr;
598
+
599
+ }
600
+
601
+
602
+
603
+ ul.sm li {
604
+
605
+ position:relative;
606
+
607
+ }
608
+
609
+
610
+
611
+ ul.sm a {
612
+
613
+ position:relative;
614
+
615
+ display:block;
616
+
617
+ }
618
+
619
+
620
+
621
+ ul.sm a.disabled {
622
+
623
+ cursor:default;
624
+
625
+ }
626
+
627
+
628
+
629
+ ul.sm ul {
306
630
 
307
631
  position:absolute;
308
632
 
309
- bottom:2px;
633
+ top:-999999px;
310
-
634
+
311
- left:50%;
635
+ left:-800px;
312
-
313
- margin-left:-5px;
636
+
314
-
315
- /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
316
-
317
- width:0;
637
+ width:auto;
638
+
639
+ }
640
+
641
+
642
+
643
+ ul.sm li {
644
+
645
+ float:left;
646
+
647
+ }
648
+
649
+
650
+
651
+ ul.sm:after {
652
+
653
+ content:"\00a0";
654
+
655
+ display:block;
318
656
 
319
657
  height:0;
320
658
 
659
+ font:0/0 serif;
660
+
661
+ clear:both;
662
+
663
+ visibility:hidden;
664
+
321
665
  overflow:hidden;
322
666
 
323
- border-width:5px; /* tweak size of the arrow */
324
-
325
- border-style:solid dashed dashed dashed;
326
-
327
- border-color:#333 transparent transparent transparent;
328
-
329
- }
667
+ }
330
-
331
-
332
-
333
- .sm-blue-vertical a span.sub-arrow, .sm-blue ul a span.sub-arrow {
668
+
334
-
335
- bottom:auto;
669
+
336
-
337
- top:50%;
338
-
339
- margin-top:-5px;
340
-
341
- right:15px;
342
-
343
- left:auto;
344
-
345
- margin-left:0;
346
-
347
- border-style:dashed dashed dashed solid;
348
-
349
- border-color:transparent transparent transparent #aaa;
350
-
351
- }
352
-
353
-
354
-
355
- /* Items separators
356
-
357
- ===================*/
358
-
359
-
360
-
361
- .sm-blue li {
362
-
363
- border-left:1px solid #f8b500;
364
-
365
- }
366
-
367
-
368
-
369
- .sm-blue li:first-child, .sm-blue-vertical li, .sm-blue ul li {
370
-
371
- border-left:0;
372
-
373
- }
374
-
375
-
376
-
377
- /* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package
378
-
379
- ===================*/
380
-
381
-
382
-
383
- .sm-blue span.scroll-up, .sm-blue span.scroll-down {
384
-
385
- position:absolute;
386
-
387
- display:none;
388
-
389
- visibility:hidden;
390
-
391
- overflow:hidden;
392
-
393
- background:#ffffff;
394
-
395
- height:20px;/* width and position will be automatically set by the script */
396
-
397
- }
398
-
399
-
400
-
401
- .sm-blue span.scroll-up-arrow, .sm-blue span.scroll-down-arrow {
402
-
403
- position:absolute;
404
-
405
- top:-2px;
406
-
407
- left:50%;
408
-
409
- margin-left:-8px;
410
-
411
- /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
412
-
413
- width:0;
414
-
415
- height:0;
416
-
417
- overflow:hidden;
418
-
419
- border-width:8px; /* tweak size of the arrow */
420
-
421
- border-style:dashed dashed solid dashed;
422
-
423
- border-color:transparent transparent #637d4d transparent;
424
-
425
- }
426
-
427
-
428
-
429
- .sm-blue span.scroll-down-arrow {
430
-
431
- top:6px;
432
-
433
- border-style:solid dashed dashed dashed;
434
-
435
- border-color:#637d4d transparent transparent transparent;
436
-
437
- }
438
-
439
-
440
-
441
-
442
-
443
- /*
444
-
445
- ---------------------------------------------------------------
446
-
447
- Responsiveness
448
-
449
- These will make the sub menus collapsible when the screen width is too small.
450
-
451
- ---------------------------------------------------------------*/
452
-
453
-
454
-
455
-
456
-
457
- /* decrease horizontal main menu items left/right padding to avoid wrapping */
458
-
459
- @media screen and (min-width: 1130px) {
460
-
461
- .menutop {
462
-
463
- width: 19.85%;
464
-
465
- text-align: center;
466
-
467
- font-size: 18px;
468
-
469
- }
470
-
471
- }
472
-
473
- @media screen and (min-width: 769px) and (max-width: 1129px) {
474
-
475
- .menutop {
476
-
477
- width: 19.7%;
478
-
479
- text-align: center;
480
-
481
- font-size: 15px;
482
-
483
- }
484
-
485
- }
486
-
487
- @media screen and (min-width: 481px) and (max-width: 768px) {
488
-
489
- .menutop {
490
-
491
- width: 19.5%;
492
-
493
- text-align: center;
494
-
495
- font-size: 13px;
496
-
497
- }
498
-
499
- }
500
-
501
- @media screen and (max-width: 480px) {
502
-
503
-
504
-
505
- /* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
506
-
507
- ul.sm-blue {
508
-
509
- width:auto !important;
510
-
511
- margin: 10px !important;
512
-
513
- margin-top: 250px !important;
514
-
515
- }
516
-
517
-
518
-
519
- ul.sm-blue ul {
520
-
521
- display:none;
522
-
523
- position:static !important;
524
-
525
- top:auto !important;
526
-
527
- left:auto !important;
528
-
529
- margin-left:0 !important;
530
-
531
- margin-top:0 !important;
532
-
533
- width:auto !important;
534
-
535
- min-width:0 !important;
536
-
537
- max-width:none !important;
538
-
539
- }
540
-
541
-
542
-
543
- ul.sm-blue>li {
544
-
545
- float:none;
546
-
547
- }
548
-
549
-
550
-
551
- ul.sm-blue>li>a, ul.sm-blue ul.sm-nowrap>li>a {
552
-
553
- white-space:normal;
554
-
555
- }
556
-
557
-
558
-
559
- ul.sm-blue iframe {
560
-
561
- display:none;
562
-
563
- }
564
-
565
-
566
-
567
- /
568
670
 
569
671
 
570
672
 
@@ -575,105 +677,3 @@
575
677
 
576
678
 
577
679
  ```
578
-
579
- ```
580
-
581
- sm-core-css.css
582
-
583
-
584
-
585
- .sm, .sm ul, .sm li {
586
-
587
- display:block;
588
-
589
- list-style:none;
590
-
591
- padding:0;
592
-
593
- margin:0;
594
-
595
- line-height:normal;
596
-
597
- direction:ltr;
598
-
599
- }
600
-
601
-
602
-
603
- ul.sm li {
604
-
605
- position:relative;
606
-
607
- }
608
-
609
-
610
-
611
- ul.sm a {
612
-
613
- position:relative;
614
-
615
- display:block;
616
-
617
- }
618
-
619
-
620
-
621
- ul.sm a.disabled {
622
-
623
- cursor:default;
624
-
625
- }
626
-
627
-
628
-
629
- ul.sm ul {
630
-
631
- position:absolute;
632
-
633
- top:-999999px;
634
-
635
- left:-800px;
636
-
637
- width:auto;
638
-
639
- }
640
-
641
-
642
-
643
- ul.sm li {
644
-
645
- float:left;
646
-
647
- }
648
-
649
-
650
-
651
- ul.sm:after {
652
-
653
- content:"\00a0";
654
-
655
- display:block;
656
-
657
- height:0;
658
-
659
- font:0/0 serif;
660
-
661
- clear:both;
662
-
663
- visibility:hidden;
664
-
665
- overflow:hidden;
666
-
667
- }
668
-
669
-
670
-
671
-
672
-
673
-
674
-
675
-
676
-
677
-
678
-
679
- ```

1

html部分の修正を行いました

2020/08/18 04:57

投稿

mimizuk
mimizuk

スコア8

test CHANGED
File without changes
test CHANGED
@@ -4,205 +4,581 @@
4
4
 
5
5
  htmlファイルの項目を減らし
6
6
 
7
+
8
+
9
+ sm-blue.css中のwidthを変更して対応したところ、一見うまくいったように見えるのですが、ブラウザの大きさを変更すると5つある状態に戻ってしまいます。
10
+
11
+ どこを変更すればきれいにcategory3までを表示できるようになるのでしょうか
12
+
13
+ ご教示いただけますと幸いです。
14
+
15
+
16
+
17
+ ```index.html
18
+
19
+ <!DOCTYPE html>
20
+
21
+ <html lang="ja">
22
+
23
+ <head>
24
+
25
+ <meta charset="utf-8" />
26
+
27
+ <title>test</title>
28
+
29
+ <meta name="Description" content="ここにキーワードを含むページの説明文を記入" />
30
+
31
+ <meta name="Keywords" content="キーワード,キーワード,キーワード" />
32
+
33
+ <meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
34
+
35
+ <link rel="stylesheet" href="css/sm-core-css.css"> <!--中央上のメインメニュー-->
36
+
37
+ <link rel="stylesheet" href="css/sm-blue.css"> <!--中央上のメインメニュー-->
38
+
39
+ </head>
40
+
41
+
42
+
43
+ <body>
44
+
45
+ <div id="wrapper">
46
+
47
+ <div id="contents">
48
+
49
+ <div id="column1">
50
+
51
+ <div id="column1_inner">
52
+
53
+ <ul id="main-menu" class="sm sm-blue">
54
+
55
+ <li class="menutop"><a href="index.html">home</a>
56
+
57
+ <li class="menutop"><a href="#">category1</a>
58
+
59
+ <ul>
60
+
61
+ <li class="menusub"><a href="#">subcategory1</a>
62
+
63
+ <ul>
64
+
65
+ <li><a href="#">content</a>
66
+
67
+ </ul>
68
+
69
+ <li class="menusub"><a href="#">subcategory2</a>
70
+
71
+ <li class="menusub"><a href="#">subcategory3</a>
72
+
73
+ </ul>
74
+
75
+ <li class="menutop"><a href="#">category2</a>
76
+
77
+ <li class="menutop"><a href="#">category3</a>
78
+
79
+ <ul>
80
+
81
+
82
+
83
+ </ul>
84
+
85
+ </li>
86
+
87
+ <li class="menutop"><a href="#">category4</a>
88
+
89
+ </li>
90
+
91
+ </ul>
92
+
93
+ <!-- / #wrapper -->
94
+
95
+ </div>
96
+
97
+
98
+
99
+ <!-- javascript設定 -->
100
+
101
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード-->
102
+
103
+ <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <!--エフェクト効果-->
104
+
105
+ <script src="js/jquery.smartmenus.js"></script> <!--メインメニュー-->
106
+
107
+ <script>
108
+
109
+ $(function() {
110
+
111
+ $('#main-menu').smartmenus();
112
+
113
+ });
114
+
115
+ </script>
116
+
117
+ <script src="js/app.js"></script> <!--youtube api、flickr api 設定-->
118
+
119
+ <script src="js/jquery.vgrid.min.js"></script> <!--ボックスを敷き詰める-->
120
+
121
+ <script src="js/jquery.slimscroll.js"></script> <!--新着情報のスクロール-->
122
+
123
+ <script>
124
+
125
+ $('#scroll').slimScroll({
126
+
127
+ });
128
+
129
+ </script>
130
+
131
+ <script src="js/lightbox-2.6.min.js"></script> <!--画像拡大-->
132
+
133
+ <script src="js/scrolltopcontrol.js"></script> <!--スクロールしながらページのトップに戻る-->
134
+
135
+ </body>
136
+
137
+ </html>
138
+
139
+
140
+
141
+ ```
142
+
143
+ ```sm-blue.css
144
+
145
+ /
146
+
147
+
148
+
149
+ .sm-blue {
150
+
151
+ background: #ffd900; /* Old browsers */
152
+
153
+ background: -moz-linear-gradient(top, #ffd900 0%, #ffdb14 100%); /* FF3.6+ */
154
+
155
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd900), color-stop(100%,#ffdb14)); /* Chrome,Safari4+ */
156
+
157
+ background: -webkit-linear-gradient(top, #ffd900 0%,#ffdb14 100%); /* Chrome10+,Safari5.1+ */
158
+
159
+ background: -o-linear-gradient(top, #ffd900 0%,#ffdb14 100%); /* Opera 11.10+ */
160
+
161
+ background: -ms-linear-gradient(top, #ffd900 0%,#ffdb14 100%); /* IE10+ */
162
+
163
+ background: linear-gradient(to bottom, #ffd900 0%,#ffdb14 100%); /* W3C */
164
+
165
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd900', endColorstr='#ffdb14',GradientType=0 ); /* IE6-9 */
166
+
167
+ -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3);
168
+
169
+ -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3);
170
+
171
+ box-shadow:0 1px 1px rgba(0,0,0,0.3);
172
+
173
+ }
174
+
175
+
176
+
177
+ .sm-blue ul {
178
+
179
+ border:1px solid #a9a9a9;
180
+
181
+ padding:7px 0;
182
+
183
+ background:#fff;
184
+
185
+ -moz-border-radius:0 0 4px 4px;
186
+
187
+ -webkit-border-radius:0 0 4px 4px;
188
+
189
+ border-radius:0 0 4px 4px;
190
+
191
+ -moz-box-shadow:0 5px 12px rgba(0,0,0,0.3);
192
+
193
+ -webkit-box-shadow:0 5px 12px rgba(0,0,0,0.3);
194
+
195
+ box-shadow:0 5px 12px rgba(0,0,0,0.3);
196
+
197
+ }
198
+
199
+
200
+
201
+
202
+
203
+ /* Menu items
204
+
205
+ ===================*/
206
+
207
+
208
+
209
+ .sm-blue a {
210
+
211
+ padding:10px 0 14px;
212
+
213
+ color:#333;
214
+
215
+ line-height:23px;
216
+
217
+ font-family:"PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
218
+
219
+ font-weight:bold;
220
+
221
+ text-decoration:none;
222
+
223
+ text-shadow:0 1px 0 rgba(0,0,0,0.3);
224
+
225
+ text-transform: capitalize;
226
+
227
+ }
228
+
229
+
230
+
231
+ .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
232
+
233
+ background: #f8b500; /* Old browsers */
234
+
235
+ background: -moz-linear-gradient(top, #f8b500 0%, #f7b613 100%); /* FF3.6+ */
236
+
237
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8b500), color-stop(100%,#f7b613)); /* Chrome,Safari4+ */
238
+
239
+ background: -webkit-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* Chrome10+,Safari5.1+ */
240
+
241
+ background: -o-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* Opera 11.10+ */
242
+
243
+ background: -ms-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* IE10+ */
244
+
245
+ background: linear-gradient(to bottom, #f8b500 0%,#f7b613 100%); /* W3C */
246
+
247
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b500', endColorstr='#f7b613',GradientType=0 ); /* IE6-9 */
248
+
249
+ color:#333;
250
+
251
+ }
252
+
253
+
254
+
255
+ .sm-blue ul a {
256
+
257
+ padding:9px 40px 8px 23px;
258
+
259
+ background:transparent;
260
+
261
+ color:#637d4d;
262
+
263
+ font-size:16px;
264
+
265
+ text-shadow:none;
266
+
267
+ }
268
+
269
+
270
+
271
+ .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted {
272
+
273
+ background: #f8b500; /* Old browsers */
274
+
275
+ background: -moz-linear-gradient(top, #f8b500 0%, #f7b613 100%); /* FF3.6+ */
276
+
277
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8b500), color-stop(100%,#f7b613)); /* Chrome,Safari4+ */
278
+
279
+ background: -webkit-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* Chrome10+,Safari5.1+ */
280
+
281
+ background: -o-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* Opera 11.10+ */
282
+
283
+ background: -ms-linear-gradient(top, #f8b500 0%,#f7b613 100%); /* IE10+ */
284
+
285
+ background: linear-gradient(to bottom, #f8b500 0%,#f7b613 100%); /* W3C */
286
+
287
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b500', endColorstr='#f7b613',GradientType=0 ); /* IE6-9 */
288
+
289
+ color:#fff;
290
+
291
+ text-shadow:0 1px 0 rgba(0,0,0,0.3);
292
+
293
+ }
294
+
295
+
296
+
297
+
298
+
299
+ /* Sub menu indicators
300
+
301
+ ===================*/
302
+
303
+
304
+
305
+ .sm-blue a span.sub-arrow {
306
+
307
+ position:absolute;
308
+
309
+ bottom:2px;
310
+
311
+ left:50%;
312
+
313
+ margin-left:-5px;
314
+
315
+ /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
316
+
317
+ width:0;
318
+
319
+ height:0;
320
+
321
+ overflow:hidden;
322
+
323
+ border-width:5px; /* tweak size of the arrow */
324
+
325
+ border-style:solid dashed dashed dashed;
326
+
327
+ border-color:#333 transparent transparent transparent;
328
+
329
+ }
330
+
331
+
332
+
333
+ .sm-blue-vertical a span.sub-arrow, .sm-blue ul a span.sub-arrow {
334
+
335
+ bottom:auto;
336
+
337
+ top:50%;
338
+
339
+ margin-top:-5px;
340
+
341
+ right:15px;
342
+
343
+ left:auto;
344
+
345
+ margin-left:0;
346
+
347
+ border-style:dashed dashed dashed solid;
348
+
349
+ border-color:transparent transparent transparent #aaa;
350
+
351
+ }
352
+
353
+
354
+
355
+ /* Items separators
356
+
357
+ ===================*/
358
+
359
+
360
+
361
+ .sm-blue li {
362
+
363
+ border-left:1px solid #f8b500;
364
+
365
+ }
366
+
367
+
368
+
369
+ .sm-blue li:first-child, .sm-blue-vertical li, .sm-blue ul li {
370
+
371
+ border-left:0;
372
+
373
+ }
374
+
375
+
376
+
377
+ /* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package
378
+
379
+ ===================*/
380
+
381
+
382
+
383
+ .sm-blue span.scroll-up, .sm-blue span.scroll-down {
384
+
385
+ position:absolute;
386
+
387
+ display:none;
388
+
389
+ visibility:hidden;
390
+
391
+ overflow:hidden;
392
+
393
+ background:#ffffff;
394
+
395
+ height:20px;/* width and position will be automatically set by the script */
396
+
397
+ }
398
+
399
+
400
+
401
+ .sm-blue span.scroll-up-arrow, .sm-blue span.scroll-down-arrow {
402
+
403
+ position:absolute;
404
+
405
+ top:-2px;
406
+
407
+ left:50%;
408
+
409
+ margin-left:-8px;
410
+
411
+ /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
412
+
413
+ width:0;
414
+
415
+ height:0;
416
+
417
+ overflow:hidden;
418
+
419
+ border-width:8px; /* tweak size of the arrow */
420
+
421
+ border-style:dashed dashed solid dashed;
422
+
423
+ border-color:transparent transparent #637d4d transparent;
424
+
425
+ }
426
+
427
+
428
+
429
+ .sm-blue span.scroll-down-arrow {
430
+
431
+ top:6px;
432
+
433
+ border-style:solid dashed dashed dashed;
434
+
435
+ border-color:#637d4d transparent transparent transparent;
436
+
437
+ }
438
+
439
+
440
+
441
+
442
+
443
+ /*
444
+
445
+ ---------------------------------------------------------------
446
+
447
+ Responsiveness
448
+
449
+ These will make the sub menus collapsible when the screen width is too small.
450
+
451
+ ---------------------------------------------------------------*/
452
+
453
+
454
+
455
+
456
+
457
+ /* decrease horizontal main menu items left/right padding to avoid wrapping */
458
+
7
- ** @media screen and (min-width: 1130px) {
459
+ @media screen and (min-width: 1130px) {
8
460
 
9
461
  .menutop {
10
462
 
11
- __width: 19.85%;__
463
+ width: 19.85%;
12
464
 
13
465
  text-align: center;
14
466
 
15
467
  font-size: 18px;
16
468
 
17
- }**
18
-
19
- 上記のsm-blue.css中のwidthを変更して対応したところ、一見うまくいったように見えるのですが、ブラウザの大きさを変更すると5つある状態に戻ってしまいます。
20
-
21
- どこを変更すればきれいにcategory3までを表示できるようになるのでしょうか
22
-
23
- ご教示いただけますと幸いです。
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
- **html **
32
-
33
-
34
-
35
- <!DOCTYPE html>
36
-
37
- <html lang="ja">
38
-
39
- <head>
40
-
41
- <meta charset="utf-8" />
42
-
43
- <title>ここにキーワードを含むページのタイトルを記入</title>
44
-
45
- <meta name="Description" content="ここにキーワードを含むページの説明文を記入" />
46
-
47
- <meta name="Keywords" content="キーワード,キーワード,キーワード" />
48
-
49
- <meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
50
-
51
- <link rel="icon" href="http://saetl.net/favicon.ico" type="image/x-icon" />
52
-
53
- <link rel="shortcut icon" type="img/x-icon" href="http://saetl.net/favicon.ico" />
54
-
55
- <link rel="stylesheet" href="css/style.css">
56
-
57
- <link rel="stylesheet" href="css/sm-core-css.css"> <!--中央上のメインメニュー-->
58
-
59
- <link rel="stylesheet" href="css/sm-blue.css"> <!--中央上のメインメニュー-->
60
-
61
- <link rel="stylesheet" href="css/lightbox.css"> <!--画像拡大-->
62
-
63
- <link rel="stylesheet" href="css/hovereffects.css"> <!--ホバーエフェクト-->
64
-
65
- <link href='http://fonts.googleapis.com/css?family=Ceviche+One|Artifika' rel='stylesheet' type='text/css'> <!--googleのwebフォント-->
66
-
67
- <!--[if lt IE 9]>
68
-
69
- <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
70
-
71
- <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
72
-
73
- <![endif]-->
74
-
75
- </head>
76
-
77
-
78
-
79
- <body>
80
-
81
-
82
-
83
- <noscript>
84
-
85
- <p>※このページはJavaScriptを使用しています。JavaScript設定を有効にしてご覧ください。</p>
86
-
87
- </noscript>
88
-
89
-
90
-
91
-
92
-
93
- <div id="wrapper">
94
-
95
- <div id="contents">
96
-
97
-
98
-
99
- <!-- ページの中央部分 -->
100
-
101
- <div id="column1">
102
-
103
- <div id="column1_inner">
104
-
105
-
106
-
107
- <!-- ナビゲーションメニュー(ヘッダーの下のメインメニュー)ー-->
108
-
109
- <ul id="main-menu" class="sm sm-blue">
110
-
111
- <li class="menutop"><a href="index.html">home</a>
112
-
113
- <li class="menutop"><a href="#">category1</a>
114
-
115
- <ul>
116
-
117
- <li class="menusub"><a href="#">subcategory1</a>
118
-
119
- <ul>
120
-
121
- <li><a href="#">content</a>
122
-
123
- </ul>
124
-
125
- <li class="menusub"><a href="#">subcategory2</a>
126
-
127
- <li class="menusub"><a href="#">subcategory3</a>
128
-
129
- </ul>
130
-
131
- <li class="menutop"><a href="category.html">category2</a>
132
-
133
- <li class="menutop"><a href="#">category3</a>
134
-
135
- <ul>
136
-
137
- <li class="menusub"><a href="#">subcategory1</a>
138
-
139
- <li class="menusub"><a href="#">subcategory2</a>
140
-
141
- <li class="menusub"><a href="#">subcategory3</a>
142
-
143
- </ul>
144
-
145
- <li class="menutop"><a href="#">category4</a>
146
-
147
- </ul>
148
-
149
-
150
-
151
-
152
-
153
- </div>
154
-
155
-
156
-
157
- <!-- javascript設定 -->
158
-
159
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード-->
160
-
161
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <!--エフェクト効果-->
162
-
163
- <script src="js/jquery.smartmenus.js"></script> <!--メインメニュー-->
164
-
165
- <script>
166
-
167
- $(function() {
168
-
169
- $('#main-menu').smartmenus();
170
-
171
- });
172
-
173
- </script>
174
-
175
- <script src="js/app.js"></script> <!--youtube api、flickr api 設定-->
176
-
177
- <script src="js/jquery.vgrid.min.js"></script> <!--ボックスを敷き詰める-->
178
-
179
- <script src="js/jquery.slimscroll.js"></script> <!--新着情報のスクロール-->
180
-
181
- <script>
182
-
183
- $('#scroll').slimScroll({
184
-
185
- });
186
-
187
- </script>
188
-
189
- <script src="js/lightbox-2.6.min.js"></script> <!--画像拡大-->
190
-
191
- <script src="js/scrolltopcontrol.js"></script> <!--スクロールしながらページのトップに戻る-->
192
-
193
- </body>
194
-
195
- </html>
196
-
197
-
198
-
199
- **sm-core-css.css**
200
-
201
-
202
-
203
- /* SmartMenus Core CSS (it's not recommended editing this)
204
-
205
- ===============================================================*/
469
+ }
470
+
471
+ }
472
+
473
+ @media screen and (min-width: 769px) and (max-width: 1129px) {
474
+
475
+ .menutop {
476
+
477
+ width: 19.7%;
478
+
479
+ text-align: center;
480
+
481
+ font-size: 15px;
482
+
483
+ }
484
+
485
+ }
486
+
487
+ @media screen and (min-width: 481px) and (max-width: 768px) {
488
+
489
+ .menutop {
490
+
491
+ width: 19.5%;
492
+
493
+ text-align: center;
494
+
495
+ font-size: 13px;
496
+
497
+ }
498
+
499
+ }
500
+
501
+ @media screen and (max-width: 480px) {
502
+
503
+
504
+
505
+ /* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
506
+
507
+ ul.sm-blue {
508
+
509
+ width:auto !important;
510
+
511
+ margin: 10px !important;
512
+
513
+ margin-top: 250px !important;
514
+
515
+ }
516
+
517
+
518
+
519
+ ul.sm-blue ul {
520
+
521
+ display:none;
522
+
523
+ position:static !important;
524
+
525
+ top:auto !important;
526
+
527
+ left:auto !important;
528
+
529
+ margin-left:0 !important;
530
+
531
+ margin-top:0 !important;
532
+
533
+ width:auto !important;
534
+
535
+ min-width:0 !important;
536
+
537
+ max-width:none !important;
538
+
539
+ }
540
+
541
+
542
+
543
+ ul.sm-blue>li {
544
+
545
+ float:none;
546
+
547
+ }
548
+
549
+
550
+
551
+ ul.sm-blue>li>a, ul.sm-blue ul.sm-nowrap>li>a {
552
+
553
+ white-space:normal;
554
+
555
+ }
556
+
557
+
558
+
559
+ ul.sm-blue iframe {
560
+
561
+ display:none;
562
+
563
+ }
564
+
565
+
566
+
567
+ /
568
+
569
+
570
+
571
+
572
+
573
+
574
+
575
+
576
+
577
+ ```
578
+
579
+ ```
580
+
581
+ sm-core-css.css
206
582
 
207
583
 
208
584
 
@@ -272,68 +648,6 @@
272
648
 
273
649
 
274
650
 
275
- ul.sm ul li, ul.sm-vertical li {
276
-
277
- float:none;
278
-
279
- }
280
-
281
-
282
-
283
- ul.sm a {
284
-
285
- white-space:nowrap;
286
-
287
- }
288
-
289
-
290
-
291
- ul.sm ul a, ul.sm-vertical a {
292
-
293
- white-space:normal;
294
-
295
- }
296
-
297
-
298
-
299
- * html ul.sm-vertical li {
300
-
301
- float:left;
302
-
303
- width:100%;
304
-
305
- }
306
-
307
-
308
-
309
- * html ul.sm-vertical ul li {
310
-
311
- float:none;
312
-
313
- width:auto;
314
-
315
- }
316
-
317
-
318
-
319
- *:first-child+html ul.sm-vertical>li {
320
-
321
- float:left;
322
-
323
- width:100%;
324
-
325
- }
326
-
327
-
328
-
329
- ul.sm ul.sm-nowrap>li>a {
330
-
331
- white-space:nowrap;
332
-
333
- }
334
-
335
-
336
-
337
651
  ul.sm:after {
338
652
 
339
653
  content:"\00a0";
@@ -354,252 +668,12 @@
354
668
 
355
669
 
356
670
 
357
- * html ul.sm {
671
+
358
-
359
- height:1px;
672
+
360
-
361
- }
673
+
362
-
363
-
364
-
365
- *:first-child+html ul.sm {
674
+
366
-
367
- min-height:1px;
675
+
368
-
369
- }
676
+
370
-
371
-
372
-
373
- ul.sm li *, ul.sm li *:before, ul.sm li *:after {
677
+
374
-
375
- -moz-box-sizing:content-box;
678
+
376
-
377
- -webkit-box-sizing:content-box;
378
-
379
- box-sizing:content-box;
380
-
381
- }
382
-
383
-
384
-
385
- ul.sm {
679
+ ```
386
-
387
- -webkit-tap-highlight-color:rgba(0,0,0,0);
388
-
389
- }
390
-
391
-
392
-
393
- .subtext {
394
-
395
- width:300px;
396
-
397
- padding:5px 20px;
398
-
399
- }
400
-
401
-
402
-
403
-
404
-
405
- **sm-blue.css**
406
-
407
-
408
-
409
- /* SmartMenus Core CSS (it's not recommended editing this)
410
-
411
- ===============================================================*/
412
-
413
-
414
-
415
- .sm, .sm ul, .sm li {
416
-
417
- display:block;
418
-
419
- list-style:none;
420
-
421
- padding:0;
422
-
423
- margin:0;
424
-
425
- line-height:normal;
426
-
427
- direction:ltr;
428
-
429
- }
430
-
431
-
432
-
433
- ul.sm li {
434
-
435
- position:relative;
436
-
437
- }
438
-
439
-
440
-
441
- ul.sm a {
442
-
443
- position:relative;
444
-
445
- display:block;
446
-
447
- }
448
-
449
-
450
-
451
- ul.sm a.disabled {
452
-
453
- cursor:default;
454
-
455
- }
456
-
457
-
458
-
459
- ul.sm ul {
460
-
461
- position:absolute;
462
-
463
- top:-999999px;
464
-
465
- left:-800px;
466
-
467
- width:auto;
468
-
469
- }
470
-
471
-
472
-
473
- ul.sm li {
474
-
475
- float:left;
476
-
477
- }
478
-
479
-
480
-
481
- ul.sm ul li, ul.sm-vertical li {
482
-
483
- float:none;
484
-
485
- }
486
-
487
-
488
-
489
- ul.sm a {
490
-
491
- white-space:nowrap;
492
-
493
- }
494
-
495
-
496
-
497
- ul.sm ul a, ul.sm-vertical a {
498
-
499
- white-space:normal;
500
-
501
- }
502
-
503
-
504
-
505
- * html ul.sm-vertical li {
506
-
507
- float:left;
508
-
509
- width:100%;
510
-
511
- }
512
-
513
-
514
-
515
- * html ul.sm-vertical ul li {
516
-
517
- float:none;
518
-
519
- width:auto;
520
-
521
- }
522
-
523
-
524
-
525
- *:first-child+html ul.sm-vertical>li {
526
-
527
- float:left;
528
-
529
- width:100%;
530
-
531
- }
532
-
533
-
534
-
535
- ul.sm ul.sm-nowrap>li>a {
536
-
537
- white-space:nowrap;
538
-
539
- }
540
-
541
-
542
-
543
- ul.sm:after {
544
-
545
- content:"\00a0";
546
-
547
- display:block;
548
-
549
- height:0;
550
-
551
- font:0/0 serif;
552
-
553
- clear:both;
554
-
555
- visibility:hidden;
556
-
557
- overflow:hidden;
558
-
559
- }
560
-
561
-
562
-
563
- * html ul.sm {
564
-
565
- height:1px;
566
-
567
- }
568
-
569
-
570
-
571
- *:first-child+html ul.sm {
572
-
573
- min-height:1px;
574
-
575
- }
576
-
577
-
578
-
579
- ul.sm li *, ul.sm li *:before, ul.sm li *:after {
580
-
581
- -moz-box-sizing:content-box;
582
-
583
- -webkit-box-sizing:content-box;
584
-
585
- box-sizing:content-box;
586
-
587
- }
588
-
589
-
590
-
591
- ul.sm {
592
-
593
- -webkit-tap-highlight-color:rgba(0,0,0,0);
594
-
595
- }
596
-
597
-
598
-
599
- .subtext {
600
-
601
- width:300px;
602
-
603
- padding:5px 20px;
604
-
605
- }