teratail
回答率
85.47%
質問するログイン新規登録
トップドロップダウンメニューに関する質問ドロップダウンメニューの幅と位置が親要素からずれてしまうのを修正したいです。

編集履歴

質問編集履歴

2

タグの追加

2022/03/26 16:30

投稿

KEN
KEN

スコア1

test CHANGED
File without changes
test CHANGED
File without changes
ドロップダウンメニューメニューJavaScript
JavaScript

1

コードの内容を見直しました

2022/03/26 16:27

投稿

KEN
KEN

スコア1

test CHANGED
@@ -1 +1 @@
1
- ドロップダウンメニュー幅を親要素幅と合わせたい。
1
+ ドロップダウンメニューの幅と位置が親要素からずれてしまうのを修正したいです。
test CHANGED
@@ -1,11 +1,11 @@
1
- ドロップダウンで現れるメニューの幅を、常に各親要素の幅に合わせたいのですが、なぜか少し長くなってしまいどう治せばよいのか解らないままでいます。
1
+ ドロップダウンで現れるメニューの幅と位置を常に各親要素の位置と幅に合わせたいのですが、なぜか右に少し長くなってしまい、文字の位置も親要素に対してズレてしまいどう治せばよいのか困っています。PCのブラウザ画面幅によって見え方が変わり、特に大きな画面で見ると右に長くなってしまいます。せめて位置だけでも親要素に合わせたいです。
2
- どうかアドバイス宜しくお願いいたします。
2
+ どうか宜しくお願いします。
3
3
 
4
4
  ```html
5
- <nav id="menubar" class="nav-fix-pos">
5
+ <nav id="menubar" class="nav-fix-pos">
6
6
  <ul class="inner">
7
7
  <li><a href="index.html">HOME<span>ホーム</span></a></li>
8
- <li><a href="javascript:void(0)" class="cursor-default">WORKS<span>業務内容</span></a>
8
+ <li><a href="javascript:void(0)" class="cursor-default">PRODUCT<span>製品・サービス</span></a>
9
9
  <ul class="ddmenu">
10
10
  <li><a href="works.html">メニュー</a></li>
11
11
  <li><a href="works.html">メニュー</a></li>
@@ -14,7 +14,12 @@
14
14
  <li><a href="works.html">メニュー</a></li>
15
15
  </ul>
16
16
  </li>
17
+ <li><a href="javascript:void(0)" class="cursor-default">COMPANY<span>企業情報</span></a>
18
+ <ul class="ddmenu">
17
- <li><a href="about.html">ABOUT<span>当サイトについて</span></a></li>
19
+ <li><a href="works.html">メニュー</a></li>
20
+ <li><a href="works.html">メニュー</a></li>
21
+ </ul>
22
+ </li>
18
23
  <li><a href="recruit.html">RECRUIT<span>採用情報</span></a></li>
19
24
  <li><a href="javascript:void(0)" class="cursor-default">CONTACT<span>お問い合わせ</span></a>
20
25
  <ul class="ddmenu">
@@ -30,6 +35,18 @@
30
35
 
31
36
  ```CSS
32
37
 
38
+ ul {
39
+ list-style-type: none;
40
+ }
41
+ a {
42
+ color: #999;
43
+ transition: 0.2s;
44
+ }
45
+
46
+ a:hover {
47
+ color: #003300;
48
+ text-decoration: none;
49
+ }
33
50
  #menubar {
34
51
  position: relative;
35
52
  z-index: 10;
@@ -37,75 +54,98 @@
37
54
  background: #fff;
38
55
  border-top: 1px solid #ccc;
39
56
  border-bottom: 1px solid #ccc;
57
+ box-shadow:0 5px 5px -5px #000;
58
+ -webkit-box-shadow:0 5px 5px -5px #000;
59
+ -moz-box-shadow:0 5px 5px -5px #000;
40
- font-family: 'Questrial', sans-serif;
60
+ font-family: 'Kanit', sans-serif;
41
- height: 75px;
61
+ height: 80px;
62
+
42
63
  }
43
64
 
44
65
  #menubar ul li {
45
66
  float: left;
46
- width: 16.5%;
67
+ width: 16.66%;
47
- font-size: 15px;
68
+ font-size: 20px;
69
+
48
70
  }
49
71
 
50
72
  #menubar ul li a {
51
73
  text-decoration: none;
52
74
  display: block;
53
- height: 60px;
75
+ height: 70px;
54
- padding-top: 15px;
76
+ padding-top: 10px;
55
77
  }
56
78
 
57
- /*飾り文字*/
58
79
  #menubar ul li a span {
59
80
  display: block;
60
81
  font-size: 10px;
61
82
  color: #999;
62
83
  letter-spacing: 0.2em;
84
+
63
85
  }
86
+
87
+
88
+ #menubar-s, #menubar-s2, #menubar-s3, #menubar-s4 {
89
+ display: none;
90
+ }
91
+
92
+
93
+ #menubar_hdr {
94
+ display: none;
95
+ }
96
+
64
97
 
65
98
  #menubar a.cursor-default {
66
99
  cursor: default;
100
+
67
101
  color: #999;
102
+
68
103
  }
104
+
105
+
69
- #menubar ul li a:hover{
106
+ #menubar ul.ddmenu {
70
- background-color: #006400;
107
+ position:absolute;visibility: hidden;z-index: 10;
71
- color: #ffffff;
108
+ width: 16.66%;
109
+ background: #32CD32; /round: rgba(50,205,50,1);
110
+ text-align: center;
111
+ border-bottom: 1px solid #ffffff;
72
112
  }
113
+
114
+ #menubar li:hover ul.ddmenu {
115
+ animation-name: opa1;
116
+ animation-fill-mode: both;
117
+ animation-duration: 0.1S;
118
+ animation-delay: 0.1s;
119
+ }
120
+
121
+
122
+ #menubar ul.ddmenu li {
123
+ float: none;
124
+ width: 100%;
125
+ display: inline-block;
126
+ font-size: 85%;
127
+ }
128
+
129
+ #menubar ul.ddmenu li a {
130
+ height: auto;
131
+ padding: 13px;
132
+ color: #FFFFFF;
133
+ opacity: 1;
134
+ }
135
+
136
+ #menubar ul.ddmenu li a:hover {
137
+ background-color: #008000;
138
+ color: #FFFFFF;
139
+ opacity: 1;
140
+ }
73
- #menubar ul li span:hover{
141
+ #menubar ul li a:hover {
74
- color: #ffffff;
142
+ color: #FF8C00;
75
143
  }
76
144
 
77
145
 
78
- #menubar ul.ddmenu {
79
- position: absolute;
80
- visibility: hidden;
81
- z-index: 10;
82
- padding-top: 1px;
83
- width: 16.5%;
84
- font-size: 10px;
85
- }
146
+ ```
86
147
 
87
- #menubar ul.ddmenu li {
88
- float: none;
89
- width: 100%;
90
- }
91
-
92
- #menubar ul.ddmenu li a {
93
- width: 100%;
94
- height: auto;
95
- font-weight: normal;
96
- border: none;
97
- border-bottom: 1px solid #fff;
98
- background: #33CC00;
99
- background: #33CC00;
100
- color: #fff;
101
- padding: 5px 0;
102
-
103
- }
104
-
105
- #menubar ul.ddmenu li a:hover {
106
- background: #006400
107
-
108
- }
109
-
148
+ ```JS
149
+ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 4(5,e,f){1(5.o){5.o(e,f,z)}p 1(5.q){7 r=3(){f.A(5,B)};5.q(\'C\'+e,r)}p{D E F(\'�C�x���g���X�i���Ή�\');}}3 s(){2=G.H(\'I\');g(i h 2){1(2[i].k==\'l\'){2[i].8.9=\'m\';4(2[i],\'t\',3(c){7 0=d;1(0.a=="u"){0.8.9=\'v\'}});4(2[i],\'w\',3(c){7 0=d;1(0.a=="u"){0.8.9=\'m\'}});1(2[i].b.a==\'n\'){4(2[i].b,\'t\',3(c){7 0=d;x(0.a!="n"){0=0.b;1(!0)y}g(j h 0.6){1(0.6[j].k==\'l\'){0.6[j].8.9=\'v\'}}});4(2[i].b,\'w\',3(c){7 0=d;x(0.a!="n"){0=0.b;1(!0)y}g(j h 0.6){1(0.6[j].k==\'l\'){0.6[j].8.9=\'m\'}}})}}}}4(J,\'K\',s);',47,47,'_this|if|elems|function|dd_addListener|elem|childNodes|var|style|visibility|tagName|parentNode|evt|this|ev|listener|for|in|||className|ddmenu|hidden|LI|addEventListener|else|attachEvent|addEvt|dd_menu_init|mouseover|UL|visible|mouseout|while|return|false|apply|arguments|on|throw|new|Error|document|getElementsByTagName|ul|window|load'.split('|'),0,{}))
110
150
 
111
151
  ```
ドロップダウンメニューメニュー