回答編集履歴

2

+セレクタは使用しないようにしたので、取り消し

2019/02/15 04:53

投稿

miyabi_pudding
miyabi_pudding

スコア9528

test CHANGED
@@ -70,7 +70,7 @@
70
70
 
71
71
 
72
72
 
73
- そして、+セレクタ使った方が、idセレクタとか抜きですっきりするかと
73
+ ~~そして、+セレクタ使った方が、idセレクタとか抜きですっきりするかと~~
74
74
 
75
75
 
76
76
 

1

メニュー全体をオンマウスしている間、表示を継続できるように修正

2019/02/15 04:53

投稿

miyabi_pudding
miyabi_pudding

スコア9528

test CHANGED
@@ -10,9 +10,15 @@
10
10
 
11
11
  <div class="menu">
12
12
 
13
+ <div>
14
+
13
15
  <label for="menu_bar07" class="label1"><a href="#top">TOP</a></label>
14
16
 
17
+ </div>
15
18
 
19
+
20
+
21
+ <div>
16
22
 
17
23
  <label for="menu_bar01" class="label1">工事</label>
18
24
 
@@ -24,7 +30,11 @@
24
30
 
25
31
  </ul>
26
32
 
33
+ </div>
27
34
 
35
+
36
+
37
+ <div>
28
38
 
29
39
  <label for="menu_bar02" class="label1">機器修理</label>
30
40
 
@@ -36,7 +46,11 @@
36
46
 
37
47
  </ul>
38
48
 
49
+ </div>
39
50
 
51
+
52
+
53
+ <div>
40
54
 
41
55
  <label for="menu_bar03" class="label1">未分類</label>
42
56
 
@@ -47,6 +61,8 @@
47
61
  <li><a href="#mibunrui">未分類</a></li>
48
62
 
49
63
  </ul>
64
+
65
+ </div>
50
66
 
51
67
  </div>
52
68
 
@@ -90,15 +106,29 @@
90
106
 
91
107
  .menu li {
92
108
 
109
+ height: 0;
110
+
93
111
  max-height: 0;
94
112
 
95
113
  overflow-y: hidden;
114
+
115
+ -webkit-transition: height 0.3s;
116
+
117
+ -moz-transition: height 0.3s;
118
+
119
+ -ms-transition: height 0.3s;
120
+
121
+ -o-transition: height 0.3s;
122
+
123
+ transition: height 0.3s;
96
124
 
97
125
  }
98
126
 
99
127
 
100
128
 
101
- .label1:hover + ul > li {
129
+ .menu > div:hover ul > li {
130
+
131
+ height: auto;
102
132
 
103
133
  max-height: 46px;
104
134
 
@@ -152,24 +182,4 @@
152
182
 
153
183
  }
154
184
 
155
-
156
-
157
- .menu li {
158
-
159
- max-height: 0;
160
-
161
- overflow: hidden;
162
-
163
- -webkit-transition: height 0.3s;
164
-
165
- -moz-transition: height 0.3s;
166
-
167
- -ms-transition: height 0.3s;
168
-
169
- -o-transition: height 0.3s;
170
-
171
- transition: height 0.3s;
172
-
173
- }
174
-
175
185
  ```