ヘッダーが子メニューに合わせて拡大されてしまう

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

ナビゲーションメニューに子メニューを親メニュー「カテゴリー」に追加しました。

子メニューを追加をしてみたところ、どういうわけか子メニューに合わせてヘッダーが拡大されてしまいます。
私としては、子メニューを表示させてもヘッダーが拡大しないように修正したいのですが、どのソースコードを修正すればよいのかがいまいちよくわかりません。

お手数をおかけしますが、気になる箇所などございましたらご指摘いただけると嬉しいです。どうぞよろしくお願いいたします。

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="stylesheet.css">
11
12   <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
13   <script>
14   $(function() {
15      const hum = $('#hamburger, .close')
16      const nav = $('.sp-nav')
17      hum.on('click', function(){
18         nav.toggleClass('toggle');
19      });
20   });
21   </script>
22</head>
23<body>
24   <header>
25      <h1>
26         <a href="/">ああああああ</a>
27      </h1>
28      <nav class="pc-nav">
29         <ul>
30            <li><a href="#">ホーム</a></li>
31            <li><a href="#">カテゴリー</a>
32
33              <ul>
34                <li><a href="">Child1</a></li>
35                <li><a href="">Child2</a></li>
36                <li><a href="">Child3</a></li>
37                <li><a href="">Child4</a></li>
38                <li><a href="">Child5</a></li>
39              </ul>
40            </li>
41
42            <li><a href="#">掲示板</a></li>
43            <li><a href="#">自己紹介</a></li>
44            <li><a href="#">連絡先</a></li>
45         </ul>
46      </nav>
47      <nav class="sp-nav">
48         <ul>
49           <li><a href="#">ホーム</a></li>
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 class="close"><span>閉じる</span></li>
55         </ul>
56      </nav>
57      <div id="hamburger">
58         <span></span>
59      </div>
60
61	<style type="text/css">
62	.pcolle-parts {
63 	width:200px !important;
64	}
65	</style>
66
67   </header>
68   <div class="main-visual">
69     <div id="wrapper">
70       <div class="left-column">
71         コンテンツ
72       </div>
73
74       <div class="right-column">
75
76         <h3>人気記事</h3>
77
78       </div>
79
80    </div>
81   </div>
82
83   <!-- footer -->
84  <footer>
85    <p>© All rights reserved by ああああああ</p>
86  </footer>
87
88</body>
89</html>
90

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

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

回答1件

ベストアンサー

親メニューと子メニューの親子関係のレイアウトを切る必要があります。
言いえると、親メニューに、子メニューの位置やサイズの影響を受けないようにする。
つまり、親メニューからは子メニューが存在しないことにする。

そのためには、position: absolute;を使います。親要素にはposition: relative;を設定します。

CSSのposition:absolute;とは？要素を思いのままに配置する方法 | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

css
1/* ここから */
2.pc-nav li {
3  position: relative;
4}
5/* ここまで追加 */
6
7.pc-nav > ul ul {
8  flex-direction: column;
9  padding-left: 0; 
10  position: absolute; /* 追加 */
11  width: 100%; /* 追加 */
12}