子メニューが隠れてしまう

初めまして。
現在、HTML及びCSSを用いて自作サイトの作成を行っているものです。

自作サイトの作成を行っています。
ナビゲーションメニューにて、子メニューの横幅を親メニューの幅に合わせようとしているのですが、どういうわけか子メニューの左端が親メニューの右端と不ぞろいになってしまいます。

子メニューにpaddingなどを用いて修正を試みたのですがうまくいきません。
どのようにソースコードを修正してあげればよいのか、ご教授いただけたら幸いです。

どうぞよろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4   <meta charset="utf-8">
5   <meta name="robots" content="noindex,nofollow">
6   <title>ああああああ</title>
7
8   <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
10   <link rel="stylesheet" href="partsSet.css">
11   <link rel="stylesheet" href="stylesheet.css">
12
13   <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
14   <script>
15   $(function() {
16      const hum = $('#hamburger, .close')
17      const nav = $('.sp-nav')
18      hum.on('click', function(){
19         nav.toggleClass('toggle');
20      });
21   });
22   </script>
23</head>
24<body>
25   <header>
26      <h1>
27         <a href="/">ああああああ</a>
28      </h1>
29      <nav class="pc-nav">
30         <ul>
31            <li><a href="#">ホーム</a></li>
32            <li><a href="#">カテゴリー</a>
33
34              <ul>
35                <li><a href="">Child1</a></li>
36                <li><a href="">Child2</a></li>
37                <li><a href="">Child3</a></li>
38                <li><a href="">Child4</a></li>
39                <li><a href="">Child5</a></li>
40              </ul>
41            </li>
42
43            <li><a href="#">掲示板</a></li>
44            <li><a href="#">自己紹介</a></li>
45            <li><a href="#">連絡先</a></li>
46         </ul>
47      </nav>
48      <nav class="sp-nav">
49         <ul>
50           <li><a href="#">ホーム</a></li>
51           <li><a href="#">カテゴリー</a></li>
52           <li><a href="#">掲示板</a></li>
53           <li><a href="#">自己紹介</a></li>
54           <li><a href="#">連絡先</a></li>
55            <li class="close"><span>閉じる</span></li>
56         </ul>
57      </nav>
58      <div id="hamburger">
59         <span></span>
60      </div>
61
62   </header>
63   <div class="main-visual">
64     <div id="wrapper">
65       <div class="left-column">
66         コンテンツ
67       </div>
68
69       <div class="right-column">
70
71         <h3>人気記事</h3>
72
73       </div>
74
75    </div>
76   </div>
77
78   <!-- footer -->
79  <footer>
80    <p>© All rights reserved by ああああああ</p>
81  </footer>
82
83</body>
84</html>
85

CSS
1@charset "utf-8";
2* {
3   box-sizing: border-box;
4}
5body {
6   margin: 0;
7   padding: 0;
8   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
9   background-color: rgba(0,0,0,0.85);
10   letter-spacing : 0.2em;
11}
12header {
13   z-index: 30;
14   padding: 30px 4% 10px;
15   position: fixed;
16   top: 0;
17   width: 100%;
18   background-color: rgba(0,0,0,1);
19   display: flex;
20   align-items: center;
21}
22h1 {
23   margin: 0; padding: 0;
24   font-size: 20px;
25}
26
27
28a {
29   text-decoration: none;
30   color: #fff;
31}
32nav {
33   margin: 0 0 0 auto;
34}
35ul {
36   list-style: none;
37   margin: 0;
38   display: flex;
39   padding-left:10px;
40}
41li {
42   margin: 0 0 0 15px;
43   font-size: 14px;
44   padding-left:10px;
45}
46.main-visual {
47   display: flex;
48   justify-content: center;
49   align-items: flex-start;
50   height: calc(100vh - 70px);
51   background: url('main_visual.jpg') top center / cover no-repeat;
52}
53
54@media screen and (min-width: 641px) {
55
56.sp-nav {
57     display: none;
58  }
59
60.right-column {
61  padding: 30px 10px;
62  width: 25%;
63  border: 1px solid #4b4b4b;
64  margin-left: 1%;
65  background-color: rgba(255,255,255,0.9);
66  box-shadow: 2px 2px 4px;
67  border-radius: 15px;
68}
69.left-column {
70  padding: 30px 10px;
71  width: 70%;
72  border: 1px solid #4b4b4b;
73  margin-left: 2%;
74  background-color: rgba(255,255,255,0.9);
75  box-shadow: 2px 2px 4px;
76  border-radius: 15px;
77}
78}
79@media screen and (max-width: 640px) {
80
81   .right-column {
82      display: none;
83   }
84   .left-column {
85      padding: 30px 10px;
86      width: calc(100% - (20px + 2%));
87      border: 1px solid #4b4b4b;
88      margin-left: 2%;
89      background-color: rgba(255,255,255,0.9);
90      box-shadow: 2px 2px 4px;
91      border-radius: 15px;
92   }
93
94   .pc-nav {
95      display: none;
96   }
97   .sp-nav {
98      z-index: 1;
99      position: fixed;
100      top: 0;
101      left: 0;
102      width: 100%;
103      height: 100vh;
104      display: block;
105      width: 100%;
106      background: rgba(0, 0, 0, .8);
107      opacity: 0;
108      transform: translateY(-100%);
109      transition: all .2s ease-in-out;
110   }
111   #hamburger {
112      position: relative;
113      display: block;
114      width: 30px;
115      height: 25px;
116      margin: 0 0 0 auto;
117   }
118   #hamburger span {
119      position: absolute;
120      top: 50%;
121      left: 0;
122      display: block;
123      width: 100%;
124      height: 2px;
125      background-color: #4b4b4b;
126      transform: translateY(-50%);
127   }
128   #hamburger::before {
129      content: '';
130      display: block;
131      position: absolute;
132      top: 0;
133      left: 0;
134      width: 100%;
135      height: 2px;
136      background-color: #4b4b4b;
137   }
138   #hamburger::after {
139      content: '';
140      display: block;
141      position: absolute;
142      bottom: 0;
143      left: 0;
144      width: 70%;
145      height: 2px;
146      background-color: #4b4b4b;
147   }
148
149
150   /*スマホメニュー*/
151   .sp-nav ul {
152      padding: 0;
153      display: flex;
154      flex-direction: column;
155      justify-content: center;
156      height: 100%;
157   }
158   .sp-nav li {
159      margin: 0;
160      padding: 0;
161   }
162   .sp-nav li span {
163      font-size: 15px;
164      color: #fff;
165   }
166   .sp-nav li a, .sp-nav li span {
167      display: block;
168      padding: 20px 0;
169   }
170   /*-閉じるアイコンー*/
171   .sp-nav .close {
172      position: relative;
173      padding-left: 20px;
174   }
175   .sp-nav .close::before {
176      content: '';
177      position: absolute;
178      top: 50%;
179      left: 0;
180      display: block;
181      width: 16px;
182      height: 1px;
183      background: #fff;
184      transform: rotate( 45deg );
185   }
186   .sp-nav .close::after {
187      content: '';
188      position: absolute;
189      top: 50%;
190      left: 0;
191      display: block;
192      width: 16px;
193      height: 1px;
194      background: #fff;
195      transform: rotate( -45deg );
196   }
197   .toggle {
198      transform: translateY( 0 );
199      opacity: 1;
200   }
201   .main-visual {
202      padding: 0 4%;
203   }
204
205}
206
207footer {
208  width: 100%;
209  height: 70px;
210  text-align: center;
211  padding: 20px 0;
212  background-color: rgba(0,0,0,1);
213  color: #fff;
214  font-size: 0.7rem;
215}
216
217
218#wrapper {
219    width: 100%;
220    margin: 80px auto 0;
221    display: flex;
222    flex-wrap: wrap;
223}
224
225/*ナビゲーションメニューの階層装飾*/
226
227.pc-nav li li {
228    height: 0;
229    opacity: 0;
230    overflow: hidden;
231    transition: opacity　.5s;
232    padding-left:10px;
233}
234.pc-nav li li a {
235    border-top: 1px solid #eee;
236    padding-left:10px;
237}
238
239.pc-nav li:hover > ul > li {
240    height: 2rem;
241    opacity: 1;
242    overflow: visible;
243}
244
245
246.pc-nav li li a {/*子階層*/
247    line-height: 2rem;
248    background: #00305c;
249    display: block;
250    padding-left:10px;
251}
252.pc-nav li li:hover a {
253    background: #004789;
254    display: block;
255    padding-left:10px;
256}
257
258.pc-nav li {
259  position: relative;
260}
261
262.pc-nav > ul ul {
263  flex-direction: column;
264  padding-left: 0;
265  position: absolute;
266  width: 100%;
267  padding-left:10px;
268}
269
270.pc-nav > ul ul > li {
271  margin-left: 0;
272}
273
274.pc-nav > li > ul:before{/*子階層*/
275    border: 5px solid transparent;
276    border-top: 5px solid #fff;
277    content: "";
278    right: 1rem;
279    position: absolute;
280    top: 1rem;
281    transform: translateY(-40%);
282    padding-left:10px;
283}
284
285
286footer {
287  width: 100%;
288  height: 70px;
289  text-align: center;
290  padding: 20px 0;
291  background-color: rgba(0,0,0,1);
292  color: #fff;
293}
294

行動規範の内容に同意します

回答1件

ベストアンサー

問題の箇所は、position: absolute;を指定した後left: 0;をして、余分なpaddingを除去すれば解決できます。

しかし、padding-left: 10pxを(よくわからないまま)いろんなスタイルに追加している、ul要素やli要素をナビゲーション以外で使うことを考慮していないなど、全体にひどい状態です。ul要素やli要素のスタイルは、本来の目的(箇条書きとしてコンテンツに記述する)に使うために変更せず、ナビゲーション内の外見だけを変更してください。

CSS
1(前略)
2(ulとliのスタイル設定を削除)
3(中略)
4
5/*ナビゲーションメニューの階層装飾*/
6
7/* ナビゲーションの全てのul要素に共通の設定だけを書く */
8.pc-nav ul {
9  list-style: none;
10  margin: 0;
11  display: flex;
12}
13
14/* ナビゲーションの全てのli要素に共通の設定だけを書く */
15.pc-nav li {
16  font-size: 14px;
17}
18
19/* ナビゲーションの第1階層のul要素の設定 */
20.pc-nav>ul {
21  flex-direction: row;
22}
23
24/* ナビゲーションの第1階層のli要素の設定 */
25.pc-nav>ul>li {
26  margin: 0 0 0 15px;
27  padding-left: 10px;
28  position: relative;
29}
30
31/* ナビゲーションの第2階層(以降)のul要素の設定 */
32.pc-nav>ul ul {
33  flex-direction: column;
34  padding-left: 0;
35  position: absolute;
36  left: 0;
37  width: 100%;
38}
39
40/* ナビゲーションの第2階層(以降)のul要素の疑似属性 */
41.pc-nav>ul ul:before {
42  border: 5px solid transparent;
43  border-top: 5px solid #fff;
44  content: "";
45  position: absolute;
46  right: 0rem;
47  top: 5px;
48  transform: translateY(-40%);
49}
50
51/* ナビゲーションの第2階層(以降)のli要素の設定 */
52.pc-nav>ul ul>li {
53  height: 0;
54  opacity: 0;
55  overflow: hidden;
56  transition: opacity .5s;
57}
58
59/* ナビゲーションの第2階層(以降)のli要素(上位li要素ホバー時)の設定 */
60.pc-nav>ul>li:hover li {
61  height: 2rem;
62  opacity: 1;
63  overflow: visible;
64}
65
66/* ナビゲーションの第2階層(以降)のa要素の設定 */
67.pc-nav li li a {
68  border-top: 1px solid #eee;
69  line-height: 2rem;
70  background: #00305c;
71  display: block;
72  padding-left: 10px;
73}
74
75/* ナビゲーションの第2階層(以降)のa要素(ホバー時)の設定 */
76.pc-nav li li:hover a {
77  background: #004789;
78  display: block;
79}
80
81(後略)

投稿2020/08/01 00:37

Daregada

総合スコア11990

ypk

2020/08/01 03:45

ご丁寧にありがとうございます。大変わかりやすく、かつ問題を解決することができました。 paddingをむやみに使用してはいけないのですね。。。試行錯誤しながら、引き続き勉強して参ります。ありがとうございました。

Daregada

2020/08/01 03:51

いえ、「paddingをむやみに使用してはいけない」のではなく、「必要なところに書く」のです。たとえば、すべてのli要素に共通なのであれば「li { ... } 」に書けばいいですね。今回ですと、第2階層のli要素にはpadding-leftを設定したくない(その子のa要素の位置を第1階層のli要素と揃えたい)ので、第1階層のli要素にはpaddingを設定し、第2階層(以降)のli要素には設定しない、とする必要があります。

ypk

2020/08/01 04:24

失礼いたしました。ご丁寧にありがとうございます。第1階層と第2階層を同じようにpaddingで揃えようとしてはいけないということですね。第1階層と第2階層を揃えるときは、第1階層をpaddingなどを用いて場所を定めた後に、それを基準に第2階層以降は今回登場したleft: 0;などを用いて揃えてあげればいいというイメージですね、、、！毎度毎度ありがとうございます。

行動規範の内容に同意します