ナビゲーションメニューの子メニューが横向きになってしまう

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

ナビゲーションメニューの子メニューを、こちらのサイトを参考に作成してみたのですが、どういうわけか子メニューが横向きになってしまいます。

https://webdesignday.jp/inspiration/technique/css/5793/

現在私のナビゲーションメニューはこのようになっています。

私としては、「カテゴリー」以下の5つの子メニューを横向きではなく縦向きにしたいのですが、どのような修正を行えば子メニューは縦向きになるのでしょうか。

何か気になる箇所などございましたら、ご指摘いただけると嬉しいです。

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

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

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

回答2件

ベストアンサー

とりあえず、下記を追加したら子メニューは縦並びになります。

css
1.pc-nav > ul ul {
2  flex-direction: column;
3}

しかし、どういうわけか子メニューが若干、親メニューの先頭よりも右側に寄ってしまっています。

子メニューの位置のずれを修正するには、

css
1.pc-nav > ul ul {
2  flex-direction: column;
3  padding-left: 0; /* 追加 */
4}
5/* 以下追加 */
6.pc-nav > ul ul > li {
7  margin-left: 0;
8}

私としては、親メニューと子メニューの両端をそろえ、同じ長さにしたいのですがこの場合どのようにすればよいのでしょうか。

子メニューのa要素を親メニューの幅に合わせるには、

css
1.pc-nav li li a {/*子階層*/
2    background: #00305c;
3    display: block; /* 追加 */
4}

教えて下さったソースコードをさっそく実装してみたところ、どういうわけか各メニューの上下で隙間のようなものが発生してしまっております、、、

親のli要素に height: 2rem; が設定されてますので、a要素の高さをそれに合わせます。

css
1.pc-nav li li a {/*子階層*/
2    background: #00305c;
3    display: block; /* 追加 */
4    line-height: 2rem; /* 追加 */
5}

まずは、基本に立ち返って、セレクタや設定の意味を理解すること。
それと、そのうえでデベロッパーツールの使い方を覚えるとどのような設定をすればどのようになるかを実践的に理解できます。
デベロッパーツールを使いこなせると開発速度が飛躍的にアップします。

私も今回の質問者さんの細かい要求仕様の実装はデベロッパーツールで設定を確認しつつその場で修正して確認した結果です。

初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

投稿2020/07/26 08:21

編集2020/07/26 10:43

hatena19

総合スコア33790

ypk

2020/07/26 08:49

ご回答ありがとうございます。さっそく、教えていただいたソースコードを追加してみたところ確かに縦方向に修正することができました。ありがとうございます。しかし、どういうわけか子メニューが若干、親メニューの先頭よりも右側に寄ってしまっています。私としては、親メニューと子メニューの両端をそろえ、同じ長さにしたいのですがこの場合どのようにすればよいのでしょうか。お手数をおかけしますが、どうぞよろしくお願いいたします。

ypk

2020/07/26 10:13

ご丁寧にありがとうございます。大変勉強になります。最後に一つだけ、お願いがございます。教えて下さったソースコードをさっそく実装してみたところ、どういうわけか各メニューの上下で隙間のようなものが発生してしまっております、、、この隙間を解消するために、 font-size: 0; などを記述して修正を試みているのですが、残念ながら隙間が解消されません。このような隙間を解消するためには、どのようにすればよいのでしょうか。お手数をおかけしますが、どうぞよろしくお願いいたします。

ypk

2020/07/26 21:00

ご丁寧にありがとうございます。ディベロッパーツールですね。さっそく、使いこなすことができるようにいろいろいじったり調べたりしてみたいと思います。ありがとうございました。

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

自分で、「(すべての)ul要素をflexレイアウトで表示する」ように書いていますから、子メニューもその影響を受けて横に並びます。

CSS
1ul {
2   list-style: none;
3   margin: 0;
4   display: flex;
5}

他にも、「親階層」とコメントしているスタイルが、親階層限定になっていないところが見受けられます。子孫セレクターや子セレクターについて学習し直されるといいかと思います。

.pc-nav li:hover a { /*親階層*/
    background: #00305c;
}

投稿2020/07/26 07:58

Daregada

総合スコア11990

ypk

2020/07/26 08:48

ご回答いただきありがとうございます。 display: flex; については、ソースコードをサイトから引用しておりあまり理解せずに使用しておりました。また、追加のご指摘ありがとうございます。見直してみます。

Daregada

2020/07/26 08:56

行き当たりばったりにサイトを見て追加するのではなく、基本に戻って学習しなおす段階ですね。いまの段階で「ここがうまく表示されない」みたいな細部にこだわっても経験値は増えないと確信します。

ypk

2020/07/26 09:38

ありがとうございます。基本を学習しつつ、Webサイトの作成を通して知識と経験値を増やしてまいります。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ナビゲーションメニューの子メニューが横向きになってしまう

関連した質問