teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

4

リンク先変更

2018/08/04 12:47

投稿

退会済みユーザー
answer CHANGED
@@ -10,202 +10,4 @@
10
10
  2. `li`に`hover`したら`.list`に`position: absolute;`指定します。そして横幅(980px)を指定します。
11
11
  3. `.list__item`に`width: 14%;`と`float: left;`を指定します。
12
12
 
13
- 修正後のコード
14
-
15
- ```html
16
- <div id="globalnavi">
17
- <ul id="normal">
18
- <div class="dropmenu">
19
- <div class="men">
20
- <li><a href="">カテゴリ1</a>
21
- <ul class="list">
22
- <li class="list__item"><a href="">子カテゴリ</a></li>
23
- <li class="list__item"><a href="">子カテゴリ</a></li>
24
- <li class="list__item"><a href="">子カテゴリ</a></li>
25
- <li class="list__item"><a href="">子カテゴリ</a></li>
26
- <li class="list__item"><a href="">子カテゴリ</a></li>
27
- <li class="list__item"><a href="">子カテゴリ</a></li>
28
- <li class="list__item"><a href=""><span class="minimoji">more>></span></a></li>
29
- </ul>
30
- </li>
31
-
32
- </div>
33
- <div class="lay">
34
- <li><a href="/">カテゴリ2</a>
35
- <ul class="list">
36
- <li class="list__item"><a href="">子カテゴリ</a></li>
37
- <li class="list__item"><a href="">子カテゴリ</a></li>
38
- <li class="list__item"><a href="">子カテゴリ</a></li>
39
- <li class="list__item"><a href="">子カテゴリ</a></li>
40
- <li class="list__item"><a href="">子カテゴリ</a></li>
41
- <li class="list__item"><a href="">子カテゴリ</a></li>
42
- <li class="list__item"><a href=""><span class="minimoji">more>>>></span></a></li>
43
- </ul>
44
- </li>
45
- </div>
46
- <div class="girl">
47
- <li><a href="">カテゴリ3</a>
48
- <ul class="list">
49
- <li class="list__item"><a href="">子カテゴリ</a></li>
50
- <li class="list__item"><a href="">子カテゴリ</a></li>
51
- <li class="list__item"><a href="">子カテゴリ</a></li>
52
- <li class="list__item"><a href="">子カテゴリ</a></li>
53
- <li class="list__item"><a href=""><span class="minimoji">more>>>></span></a></li>
54
- </ul>
55
- </li>
56
- </div>
57
- <div class="boy">
58
- <li><a href="">カテゴリ4</a>
59
- <ul class="list">
60
- <li class="list__item"><a href="">子カテゴリ</a></li>
61
- <li class="list__item"><a href="">子カテゴリ</a></li>
62
- <li class="list__item"><a href="">子カテゴリ</a></li>
63
- <li class="list__item"><a href="">子カテゴリ</a></li>
64
- <li class="list__item"><a href=""><span class="minimoji">more>>>></span></a></li>
65
- </ul>
66
- </li>
67
- </div>
68
- <div class="leg">
69
- <li><a href="">カテゴリ5</a>
70
- <ul class="list">
71
- <li class="list__item"><a href="">子カテゴリ</a></li>
72
- <li class="list__item"><a href="">子カテゴリ</a></li>
73
- <li class="list__item"><a href="">子カテゴリ</a></li>
74
- <li class="list__item"><a href="">子カテゴリ</a></li>
75
- </ul>
76
- </li>
77
- </div>
78
- <div class="tights">
79
- <li><a href="">カテゴリ6</a>
80
- <ul class="list">
81
- <li class="list__item"><a href="">子カテゴリ</a></li>
82
- <li class="list__item"><a href="">子カテゴリ</a></li>
83
- <li class="list__item"><a href="">子カテゴリ</a></li>
84
- </ul>
85
- </li>
86
- </div>
87
- <div class="time">
88
- <li><a href="">カテゴリ7</a>
89
- </li>
90
- </div>
91
- </div>
92
- </ul>
93
- </div>
94
- ```
95
- ```css
96
- .dropmenu{
97
- /*
98
- position: relative;を追加
99
- */
100
- position: relative;
101
- *zoom: 1;
102
- list-style-type: none;
103
- width: 980px;
104
- height:45px;
105
- margin: 5px auto 30px;
106
- padding: 0;
107
- }
108
- .dropmenu:before, .dropmenu:after{
109
- content: "";
110
- display: table;
111
- }s
112
- .dropmenu:after{
113
- clear: both;
114
- }
115
- .dropmenu li{
116
- /*
117
- position: relative;は不要なので削除する
118
- */
119
- /* position: relative; */
120
- width: 14%;
121
- float: left;
122
- margin: 0 auto;
123
- padding: 0;
124
- text-align: center;
125
- }
126
- .dropmenu li a{
127
- display: block;
128
- margin: 0;
129
- padding: 15px 0 15px;
130
- background: #000000;
131
- color: #fff;
132
- font-size: 13px;
133
- line-height: 1;
134
- text-decoration: none;
135
- }
136
- .dropmenu li ul{
137
- list-style: none;
138
- display:inline-block;
139
- position: absolute;
140
- z-index: 9999;
141
- top: 100%;
142
- left: 0;
143
- margin: 0;
144
- padding: 0;
145
- }
146
- .dropmenu li ul li{
147
- width: 100%;
148
-
149
- }
150
- .dropmenu li ul li a{
151
- padding: 13px 1px;
152
- border-top: 1px solid #FFFFFF;
153
- background:#444444;
154
- text-align: center;
155
- opacity:0.9;
156
- line-height:1.5;
157
- }
158
- /*ホバー時各カテゴリ色指定*/
159
- .dropmenu .lay li a:hover{
160
- background: #c62b35;
161
- }
162
- .dropmenu .men li a:hover{
163
- background: #2c3ac7;
164
- }
165
- .dropmenu .girl li a:hover{
166
- background: #d337b4;
167
- }
168
- .dropmenu .boy li a:hover{
169
- background: #1d9692;
170
- }
171
- .dropmenu .leg li a:hover{
172
- background: #5e1922;
173
- }
174
- .dropmenu .tights li a:hover{
175
- background: #5e1922;
176
- }
177
- .dropmenu .time li a:hover{
178
- background: #dda40c;
179
- height:15px;
180
- }
181
-
182
- #globalnavi {
183
- width: 100%;
184
- height: 45px;
185
- background: #000000;
186
- }
187
-
188
- /*メニュー降り方スタイル*/
189
- #normal li ul{
190
- display: none;
191
- }
192
- #normal li:hover .list{
193
- /*
194
- position: absolute; と width: 980px;
195
- */
196
- position: absolute;
197
- display: inline-block;
198
- width: 980px;
199
- left: 0;
200
- }
201
-
202
- /*
203
- 追加部分
204
- */
205
- #normal li:hover .list__item {
206
- float: left;
207
- width: 14%;
208
- }
209
-
210
- ```
211
- [動くサンプル](https://jsfiddle.net/kmwp512h/11/)
13
+ [動くサンプル](https://jsfiddle.net/kmwp512h/32/)

3

書式の改善

2018/08/04 12:47

投稿

退会済みユーザー
answer CHANGED
@@ -191,8 +191,7 @@
191
191
  }
192
192
  #normal li:hover .list{
193
193
  /*
194
- position: absolute;
194
+ position: absolute; と width: 980px;
195
- width: 1088px;
196
195
  */
197
196
  position: absolute;
198
197
  display: inline-block;

2

書式の改善

2018/08/03 12:23

投稿

退会済みユーザー
answer CHANGED
@@ -6,8 +6,8 @@
6
6
  それだと`list__item`に`float: left;`を指定しても横並びにすることができません。なぜならば横並びに出来るほどの幅が無いからです。
7
7
 
8
8
  解決策
9
- 1. `#normal`に`position: relative;`を指定する。
9
+ 1. `.dropmenu`に`position: relative;`を指定する。
10
- 2. `li`に`hover`したら`.list`に`position: absolute;`指定します。そして横幅(1088px)を指定します。
10
+ 2. `li`に`hover`したら`.list`に`position: absolute;`指定します。そして横幅(980px)を指定します。
11
11
  3. `.list__item`に`width: 14%;`と`float: left;`を指定します。
12
12
 
13
13
  修正後のコード
@@ -94,6 +94,10 @@
94
94
  ```
95
95
  ```css
96
96
  .dropmenu{
97
+ /*
98
+ position: relative;を追加
99
+ */
100
+ position: relative;
97
101
  *zoom: 1;
98
102
  list-style-type: none;
99
103
  width: 980px;
@@ -181,13 +185,6 @@
181
185
  background: #000000;
182
186
  }
183
187
 
184
- /*
185
- 追加部分
186
- */
187
- #normal {
188
- position: relative;
189
- }
190
-
191
188
  /*メニュー降り方スタイル*/
192
189
  #normal li ul{
193
190
  display: none;
@@ -199,7 +196,7 @@
199
196
  */
200
197
  position: absolute;
201
198
  display: inline-block;
202
- width: 1088px;
199
+ width: 980px;
203
200
  left: 0;
204
201
  }
205
202
 
@@ -212,4 +209,4 @@
212
209
  }
213
210
 
214
211
  ```
215
- [動くサンプル](https://jsfiddle.net/kmwp512h/9/)
212
+ [動くサンプル](https://jsfiddle.net/kmwp512h/11/)

1

書式改善

2018/08/03 12:22

投稿

退会済みユーザー
answer CHANGED
@@ -1,8 +1,8 @@
1
1
  質問者様が記載したコードを元に修正を加えました。
2
2
  最後の方に動くサンプルを作成したのでご確認ください。
3
3
 
4
- `li`が横にならない原因
4
+ `.list__item`が横にならない原因
5
- `li`の幅がwidth14%となっておりその幅の中で子要素の`ul`の幅が自動的に決まります。
5
+ 親要素の`li`の幅がwidth14%となっておりその幅の中で子要素の`ul`の幅が自動的に決まります。
6
6
  それだと`list__item`に`float: left;`を指定しても横並びにすることができません。なぜならば横並びに出来るほどの幅が無いからです。
7
7
 
8
8
  解決策