CSSを用いてナビゲーションメニューに子メニューを作成したい

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

ナビゲーションメニューの「カテゴリー」の下に「Child1~5」の子メニューをドロップダウンメニューとして作成したいと考えているのですが、現在のソースコードだと親メニューと同じ階層で表示されてしまいます。

こちらのサイトを参考にしながら、作成を試みているのですが思うように行きません。

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

どのようにソースコードを修正すれば、「カテゴリー」の下に「Child1~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></li>
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
41            <li><a href="#">自己紹介</a></li>
42            <li><a href="#">連絡先</a></li>
43         </ul>
44      </nav>
45      <nav class="sp-nav">
46         <ul>
47           <li><a href="#">ホーム</a></li>
48           <li><a href="#">カテゴリー</a></li>
49           <li><a href="#">自己紹介</a></li>
50           <li><a href="#">連絡先</a></li>
51            <li class="close"><span>閉じる</span></li>
52         </ul>
53      </nav>
54      <div id="hamburger">
55         <span></span>
56      </div>
57
58	<style type="text/css">
59	.pcolle-parts {
60 	width:200px !important;
61	}
62	</style>
63
64   </header>
65   <div class="main-visual">
66     <div id="wrapper">
67       <div class="left-column">
68         コンテンツ
69       </div>
70
71       <div class="right-column">
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(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.pc-nav li li {
203    height: 0;
204    overflow: hidden;
205    transition: .5s;
206}
207.pc-nav li li a {
208    border-top: 1px solid #eee;
209}
210.pc-nav li:hover > ul > li {
211    height: 2rem;
212    overflow: visible;
213}
214

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

回答1件

自己解決

</li>の閉じる場所が不適切。

「ここからここまでが子どもの親ですよ～」という範囲が明確になるように、</li>を閉じる場所は子メニューの後ろにする。

//誤りのソースコード

<nav class="pc-nav">
         <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">カテゴリー</a></li>

            <ul>
              <li><a href="">Child1</a></li>
              <li><a href="">Child2</a></li>
              <li><a href="">Child3</a></li>
              <li><a href="">Child4</a></li>
              <li><a href="">Child5</a></li>
            </ul>

//正しいソースコード


<nav class="pc-nav">
         <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">カテゴリー</a>

            <ul>
              <li><a href="">Child1</a></li>
              <li><a href="">Child2</a></li>
              <li><a href="">Child3</a></li>
              <li><a href="">Child4</a></li>
              <li><a href="">Child5</a></li>
            </ul>
　　　　　　</li>

投稿2020/07/26 07:17

ypk

総合スコア83