質問編集履歴

2

実現したいこと の欄に修正、追記しました

2021/02/19 02:22

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -196,9 +196,13 @@
196
196
 
197
197
  ### 実現したいこと
198
198
 
199
- .storesをマウスホバーすると、子要素のulにslideToggleが発生し、かつ、
199
+ .storesをマウスホバーすると、子要素のulにslideToggleが発生し、かつ、
200
-
200
+
201
- .row に .bg_whiteクラスが付与される、という状態にしたいです。
201
+ .row に .bg_whiteクラスが付与される、という状態にしたいです。
202
+
203
+
204
+
205
+ 現状、①の動作はできておりますが、②の動作がしない状態にあります。
202
206
 
203
207
  ###
204
208
 

1

CSSの追記、HTMLの修正をしました

2021/02/19 02:22

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,11 @@
10
10
 
11
11
  ```ここに言語を入力
12
12
 
13
+ <header id="header">
14
+
15
+ <div class="container-fluid">
16
+
13
- <div class="row">
17
+ <div class="row">
14
18
 
15
19
  <div class="top col-12">
16
20
 
@@ -36,14 +40,136 @@
36
40
 
37
41
  </ul>
38
42
 
43
+ </div><!--.nav-item stores>
44
+
45
+ </div><!--.nav>
46
+
47
+ </div><!--.top>
48
+
49
+ </div><!--.row>
50
+
51
+ </div><!--.container-fluid>
52
+
39
- </div>
53
+ </header>
40
-
41
- </div>
42
54
 
43
55
  ```
44
56
 
45
57
  ```ここに言語を入力
46
58
 
59
+ .bg_white {
60
+
61
+ background-color: #eeeeee;
62
+
63
+ height: 201px;
64
+
65
+ }
66
+
67
+ header {
68
+
69
+
70
+
71
+ .top {
72
+
73
+ display: flex;
74
+
75
+ width: 92%;
76
+
77
+ margin: 0 auto;
78
+
79
+ padding: 0;
80
+
81
+ align-items: end;
82
+
83
+
84
+
85
+ }
86
+
87
+ img {
88
+
89
+ width: 240px;
90
+
91
+ height: auto;
92
+
93
+ object-fit: contain;
94
+
95
+ }
96
+
97
+
98
+
99
+
100
+
101
+ .nav {
102
+
103
+ margin: 0 6vw 0 auto;
104
+
105
+ flex-wrap: nowrap;
106
+
107
+
108
+
109
+ .nav-item {
110
+
111
+ margin: 0px 21px;
112
+
113
+ font-size: 17px;
114
+
115
+ letter-spacing: 1px;
116
+
117
+ transition: all .5s ease-in-out;
118
+
119
+ }
120
+
121
+
122
+
123
+ .stores {
124
+
125
+ ul {
126
+
127
+ display: none;
128
+
129
+ position: absolute;
130
+
131
+ width: 100%;
132
+
133
+ padding-top: 40px;
134
+
135
+ padding-bottom: 40px;
136
+
137
+ text-align: left;
138
+
139
+ background-color: #fff;
140
+
141
+
142
+
143
+ li {
144
+
145
+ float: none;
146
+
147
+ }
148
+
149
+ a {
150
+
151
+ position: relative;
152
+
153
+ display: inline-block;
154
+
155
+ transition: .3s;
156
+
157
+ font-size: 15px;
158
+
159
+ margin: 5px 0;
160
+
161
+ }
162
+
163
+ }
164
+
165
+ }
166
+
167
+ }
168
+
169
+ ```
170
+
171
+ ```ここに言語を入力
172
+
47
173
  $(function(){
48
174
 
49
175