質問編集履歴

1

コード全文に修正致しました。

2018/09/28 09:07

投稿

next-21
next-21

スコア13

test CHANGED
File without changes
test CHANGED
@@ -30,6 +30,8 @@
30
30
 
31
31
  *HTML*
32
32
 
33
+ <body>
34
+
33
35
  <header class="l-header">
34
36
 
35
37
  <nav class="l-gnav">
@@ -128,6 +130,12 @@
128
130
 
129
131
 
130
132
 
133
+ <div class="back"><a href="http://cly7796.net/wp/css/responding-to-switching-of-mega-drop-down-menu/">「メガドロップダウンメニューでメニューがうまく切り替えられない不具合の対応」の記事ページへ戻る</a></div>
134
+
135
+ </body>
136
+
137
+
138
+
131
139
 
132
140
 
133
141
 
@@ -136,6 +144,42 @@
136
144
 
137
145
  *CSS*
138
146
 
147
+ body {
148
+
149
+ margin: 0;
150
+
151
+ padding: 0;
152
+
153
+ }
154
+
155
+ .back {
156
+
157
+ position: fixed;
158
+
159
+ bottom: 10px;
160
+
161
+ right: 10px;
162
+
163
+ }
164
+
165
+ ul {
166
+
167
+ margin: 0;
168
+
169
+ padding-left: 0;
170
+
171
+ }
172
+
173
+ li {
174
+
175
+ list-style: none;
176
+
177
+ }
178
+
179
+
180
+
181
+
182
+
139
183
  .l-gnav-lv1 {
140
184
 
141
185
  position: relative;
@@ -168,6 +212,52 @@
168
212
 
169
213
  }
170
214
 
215
+ .l-gnav-lv2 {
216
+
217
+ position: absolute;
218
+
219
+ top: 54px;
220
+
221
+ left: 0;
222
+
223
+ width: 100%;
224
+
225
+ padding: 30px 0;
226
+
227
+ background: #3498DB;
228
+
229
+ opacity: 0;
230
+
231
+ visibility: hidden;
232
+
233
+ transition: opacity 2000ms, visibility 2000ms;
234
+
235
+ }
236
+
237
+ .l-gnav-lv1__item:hover .l-gnav-lv2 {
238
+
239
+ opacity: 1;
240
+
241
+ visibility: visible;
242
+
243
+ }
244
+
245
+ .l-gnav-lv2__item {
246
+
247
+ display: inline-block;
248
+
249
+ margin: 0 20px;
250
+
251
+ }
252
+
253
+ .l-gnav-lv2__link {
254
+
255
+ display: block;
256
+
257
+ padding: 5px;
258
+
259
+ }
260
+
171
261
 
172
262
 
173
263
  ### 試したこと