回答編集履歴
2
+セレクタは使用しないようにしたので、取り消し
answer
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
</div>
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
そして、+セレクタ使った方が、idセレクタとか抜きですっきりするかと
|
|
37
|
+
~~そして、+セレクタ使った方が、idセレクタとか抜きですっきりするかと~~
|
|
38
38
|
|
|
39
39
|
```css
|
|
40
40
|
.menu {
|
1
メニュー全体をオンマウスしている間、表示を継続できるように修正
answer
CHANGED
|
@@ -4,26 +4,34 @@
|
|
|
4
4
|
|
|
5
5
|
```html
|
|
6
6
|
<div class="menu">
|
|
7
|
+
<div>
|
|
7
8
|
<label for="menu_bar07" class="label1"><a href="#top">TOP</a></label>
|
|
9
|
+
</div>
|
|
8
10
|
|
|
11
|
+
<div>
|
|
9
12
|
<label for="menu_bar01" class="label1">工事</label>
|
|
10
13
|
<ul id="links01">
|
|
11
14
|
<li><a href="#kozi1">工事1</a></li>
|
|
12
15
|
<li><a href="#kozi2">工事2</a></li>
|
|
13
16
|
</ul>
|
|
17
|
+
</div>
|
|
14
18
|
|
|
19
|
+
<div>
|
|
15
20
|
<label for="menu_bar02" class="label1">機器修理</label>
|
|
16
21
|
<ul id="links02">
|
|
17
22
|
<li><a href="#shuri">修理</a></li>
|
|
18
23
|
<li><a href="#shiyou">使用方法</a></li>
|
|
19
24
|
</ul>
|
|
25
|
+
</div>
|
|
20
26
|
|
|
27
|
+
<div>
|
|
21
28
|
<label for="menu_bar03" class="label1">未分類</label>
|
|
22
29
|
<ul id="links03">
|
|
23
30
|
<li><a href="#kiki">機器</a></li>
|
|
24
31
|
<li><a href="#mibunrui">未分類</a></li>
|
|
25
32
|
</ul>
|
|
26
33
|
</div>
|
|
34
|
+
</div>
|
|
27
35
|
```
|
|
28
36
|
|
|
29
37
|
そして、+セレクタ使った方が、idセレクタとか抜きですっきりするかと
|
|
@@ -44,11 +52,18 @@
|
|
|
44
52
|
}
|
|
45
53
|
|
|
46
54
|
.menu li {
|
|
55
|
+
height: 0;
|
|
47
56
|
max-height: 0;
|
|
48
57
|
overflow-y: hidden;
|
|
58
|
+
-webkit-transition: height 0.3s;
|
|
59
|
+
-moz-transition: height 0.3s;
|
|
60
|
+
-ms-transition: height 0.3s;
|
|
61
|
+
-o-transition: height 0.3s;
|
|
62
|
+
transition: height 0.3s;
|
|
49
63
|
}
|
|
50
64
|
|
|
51
|
-
.
|
|
65
|
+
.menu > div:hover ul > li {
|
|
66
|
+
height: auto;
|
|
52
67
|
max-height: 46px;
|
|
53
68
|
opacity: 1;
|
|
54
69
|
}
|
|
@@ -75,14 +90,4 @@
|
|
|
75
90
|
background :#f4f4f4;
|
|
76
91
|
list-style: none;
|
|
77
92
|
}
|
|
78
|
-
|
|
79
|
-
.menu li {
|
|
80
|
-
max-height: 0;
|
|
81
|
-
overflow: hidden;
|
|
82
|
-
-webkit-transition: height 0.3s;
|
|
83
|
-
-moz-transition: height 0.3s;
|
|
84
|
-
-ms-transition: height 0.3s;
|
|
85
|
-
-o-transition: height 0.3s;
|
|
86
|
-
transition: height 0.3s;
|
|
87
|
-
}
|
|
88
93
|
```
|