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

質問編集履歴

1

修正

2021/01/13 05:33

投稿

ayuayuayu
ayuayuayu

スコア68

title CHANGED
File without changes
body CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  ```ここに言語を入力
10
10
 
11
- ul class="menu">
11
+ <ul class="menu">
12
12
  <li class="menu__item">
13
13
  <a class="menu__item__link js-menu__item__link" href="#">メールBOX</a>
14
14
  <ul class="submenu">
@@ -17,11 +17,10 @@
17
17
  </li>
18
18
  <li class="submenu__item">
19
19
  <a href="">受信メール</a>
20
-
21
-       </li>
20
+ </li>
22
21
  </ul>
23
22
  </li>
24
-
23
+ </ul>
25
24
  <script>
26
25
  $(function(){
27
26
  $('.js-menu__item__link').each(function(){
@@ -38,4 +37,58 @@
38
37
  </script>
39
38
 
40
39
  ```
40
+ ここからcssです
41
+
42
+ ```ここに言語を入力
43
+ .menu {
44
+ width:100%;
45
+ padding-left:0px;
46
+ margin-top:3px;
47
+ }
48
+ .menu__item {
49
+ background:#009FFF;
50
+ color: #fff;
51
+ cursor: pointer;
52
+ display: block;
53
+ margin-bottom: 3px;
54
+ }
55
+ .menu__item a{
56
+ text-decoration: none;
57
+ }
58
+ .menu__item li{
59
+ list-style:none;
60
+ }
61
+ .menu__item__link {
62
+ color:#000;
63
+ display: block;
64
+ line-height: 60px;
65
+ padding: 0 1rem;
66
+ position: relative;
67
+ }
68
+ .menu__item__link:after {
69
+ background:#009FFF;
70
+ content: '\f067';
71
+ font-weight: 900;
72
+ display: block;
73
+ font-family: "Font Awesome 5 Free";
74
+ line-height: 60px;
75
+ position: absolute;
76
+ right: 0;
77
+ text-align: center;
78
+ top: 0;
79
+ width: 60px;
80
+ }
81
+ .menu__item__link.on:after {
82
+ content: '\f068';
83
+ }
84
+
85
+ .submenu {
86
+ background: #fff;
87
+ display: none;
88
+ }
89
+ .submenu__item {
90
+ border-bottom: 1px solid #009FFF;
91
+ color:#000;
92
+ padding: 1rem;
93
+ }
41
94
  ```