レスポンシブにおけるハンバーガーメニューの内容の表示方法について

前提・実現したいこと

お世話になっております。
レスポンシブでハンバーガーメニューの件で困っていて知恵を貸して頂ければと思っています。

コードは下記記載の通りなのですが、実現したい事としてはPCだとドロップダウンメニューを利用しているのですが、SPだとハンバーガーメニューにした上でドロップダウンで表示している中の項目をハンバーガーで開いたタイミングですでに全て表示しておきたいのですが、どうにもうまくいかなく困っている為、ご助言頂ければありがたいです。

発生している問題・エラーメッセージ

ハンバーガーメニューの際にドロップダウンメニューの中の項目を表示したままに出来ない。

該当のソースコード

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>サンプルサイト</title>
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 
8<link href="common/css/style.css" rel="stylesheet" type="text/css">
9<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
10<script type="text/javascript" src="common/js/common.js"></script>
11
12</head>
13
14<body>
15
16
17<!--ヘッダーここから-->
18<header>
19
20	
21	<div class="hamburger">
22		<span></span>
23		<span></span>
24		<span></span>
25	</div>
26
27	<nav class="globalMenuSp">
28		<ul class="menu">
29			<li><a href="#">サンプル</a></li>
30            <li><a href="#">サンプル</a>
31				<ul>
32         			<li><a href="#">サンプル</a></li>
33         			<li><a href="#">サンプル</a></li>
34					<li><a href="#" class="stext nopage">サンプル</a></li>
35      			</ul>
36			</li>
37            <li><a href="#">プログラム</a>
38				<ul>
39         			<li><a href="#" class="nopage">サンプル</a></li>
40         			<li><a href="#" class="nopage">サンプル</a></li>
41         			<li><a href="#" class="nopage">サンプル</a></li>
42					<li><a href="#" class="nopage">サンプル</a></li>
43         			<li><a href="#" class="stext nopage">サンプル</a></li>
44         			<li><a href="#" class="stext nopage">サンプル</a></li>
45      			</ul>
46			</li>
47            <li><a href="#">サンプル</a>
48				<ul>
49         			<li><a href="#" class="nopage">サンプル</a></li>
50         			<li><a href="#" class="nopage">サンプル</a></li>
51         			<li><a href="#" class="nopage">サンプル</a></li>
52					<li><a href="#" class="nopage">サンプル</a></li>
53      			</ul>
54			</li>
55            <li><a href="#">サンプル</a>
56				<ul>
57         			<li><a href="#" class="nopage">サンプル</a></li>
58         			<li><a href="#" class="nopage">サンプル</a></li>
59         			<li><a href="#" class="nopage">サンプル</a></li>
60      			</ul>
61			</li>
62			<li><a href="#">サンプル</a>
63				<ul>
64         			<li><a href="#" class="nopage">サンプル</a></li>
65         			<li><a href="#" class="nopage">サンプル</a></li>
66         			<li><a href="#" class="nopage">サンプル</a></li>
67					<li><a href="#" class="nopage">サンプル</a></li>
68         			<li><a href="#" class="nopage">サンプル</a></li>
69      			</ul>
70			</li>
71			<li><a href="#">サンプル</a>
72				<ul>
73         			<li><a href="#">サンプル</a></li>
74         			<li><a href="#" class="nopage">サンプル</a></li>
75         			<li><a href="#" class="stext nopage">サンプル</a></li>
76      			</ul>
77			</li>
78		</ul>
79	</nav>
80	
81
82</header>
83<!--ヘッダーここまで-->
84
85
86
87<!--メインここから-->
88<div id="main">
89
90
91
92</div>
93<!--メインここまで-->
94
95
96
97<!--フッターここから-->
98<div id="footerWrap">
99	
100	<div id="footer">
101  
102  
103</div>
104</div>
105<!--フッターここまで-->
106
107
108</body>
109</html>
110

css
1@charset "UTF-8";
2/* CSS Document */
3
4/* clearfix */
5.clearfix:after {  
6visibility:hidden;/*見えなくする*/ 
7height:0;/*見えなくする*/
8display: block;/*block要素にする*/
9font-size: 0;  
10content: " ";  
11clear: both;  
12
13}  
14* html .clearfix             { zoom: 1; } /* IE6 */  
15*:first-child+html .clearfix { zoom: 1; } /* IE7 */  
16
17/* 全体 */
18*{margin:0;
19padding:0;
20color:#333333;
21}
22
23p{
24font-size:16px;
25line-height:1.6;
26font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
27}
28
29
30body{
31min-height: 100vh;
32margin-left:auto;
33margin-right:auto;
34}
35
36nav.globalMenuSp {
37	width: 100%;
38	background-color: #003E92;
39	position: relative;
40	z-index: 1;
41}
42
43.stext{
44	font-size: 11px;
45	color: #fff;
46}
47
48.nopage{
49	pointer-events: none !important;
50	background: #eee !important;
51	color: #bbb !important;
52	border: none !important;
53}
54
55@media screen and (min-width: 1001px) {
56
57.menu {
58    display: flex;
59    margin: 0 auto;
60    width: 1000px;
61}
62
63
64.menu li {
65    list-style: none;
66    position: relative;
67	height: 4rem;
68}
69.menu li a {
70    background: #003E92;
71    border-right: 1px solid #fff;
72    color: #fff;
73    display: table-cell;
74    text-align: center;
75    text-decoration: none;
76    width: 143px;
77	height: 4rem;
78	vertical-align: middle;
79	border-bottom: 3px solid #27b4ea;
80}
81
82.menu li a:last-child{
83	border-left: 1px solid #fff;
84}
85
86.menu li a:hover {
87    background: #e05892;
88	border-bottom: 3px solid #c81142;
89}
90
91.menu li li {
92    height: 0;
93    overflow: hidden;
94    transition: .5s;
95}
96.menu li li a {
97    border-top: 1px solid #eee;
98}
99.menu li:hover > ul > li {
100    height: 4rem;
101    overflow: visible;
102	}
103}
104
105
106
107
108@media screen and (max-width: 1000px) {
109	/* 1000px以下に適用されるCSS */
110	
111	.header_btn{
112		display: none;
113	}
114	
115	.menu {
116    margin: 0 auto;
117    width: 100%;
118}
119
120
121.menu li {
122    list-style: none;
123    position: relative;
124	height: 4rem;
125}
126.menu li a {
127    background: #003E92;
128    border-right: 1px solid #fff;
129	border-left: 1px solid #fff;
130    color: #000;
131    text-align: center;
132    text-decoration: none;
133	width: 100%;
134	height: 4rem;
135	vertical-align: middle;
136}
137
138
139.menu li a:hover {
140    background: #e05892;
141}
142	
143	/*　ハンバーガーボタン　*/
144.hamburger {
145	display : block;
146	position: fixed;
147	z-index : 3;
148	right : 13px;
149	top   : 7px;
150	width : 42px;
151	height: 42px;
152	cursor: pointer;
153	text-align: center;
154	background-color: #003E92;
155	
156}
157.hamburger span {
158  display : block;
159  position: absolute;
160  width   : 30px;
161  height  : 2px ;
162  left    : 6px;
163  background : #fff;
164  -webkit-transition: 0.3s ease-in-out;
165  -moz-transition   : 0.3s ease-in-out;
166  transition        : 0.3s ease-in-out;
167}
168.hamburger span:nth-child(1) {
169  top: 10px;
170}
171.hamburger span:nth-child(2) {
172  top: 20px;
173}
174.hamburger span:nth-child(3) {
175  top: 30px;
176}
177
178/* ナビ開いてる時のボタン */
179.hamburger.active span:nth-child(1) {
180  top : 16px;
181  left: 6px;
182  -webkit-transform: rotate(-45deg);
183  -moz-transform   : rotate(-45deg);
184  transform        : rotate(-45deg);
185}
186
187.hamburger.active span:nth-child(2),
188.hamburger.active span:nth-child(3) {
189  top: 16px;
190  -webkit-transform: rotate(45deg);
191  -moz-transform   : rotate(45deg);
192  transform        : rotate(45deg);
193}
194
195nav.globalMenuSp {
196  position: fixed;
197  z-index : 2;
198  top  : -5px;
199  left : 0;
200  color: #000;
201  background: #fff;
202  text-align: center;
203  transform: translateY(-100%);
204  transition: all 0.6s;
205  width: 100%;
206}
207
208nav.globalMenuSp ul {
209  background: #ccc;
210  margin: 0 auto;
211  padding: 0;
212  width: 100%;
213}
214
215nav.globalMenuSp ul li {
216  list-style-type: none;
217  padding: 0;
218  width: 100%;
219  border-bottom: 1px solid #fff;
220}
221nav.globalMenuSp ul li:last-child {
222  padding-bottom: 0;
223  border-bottom: none;
224}
225nav.globalMenuSp ul li:hover{
226  background :#ddd;
227}
228
229nav.globalMenuSp ul li a {
230  display: block;
231  color: #fff;
232  padding: 1em 0;
233  text-decoration :none;
234}
235
236nav.globalMenuSp > .menu li li {
237    height: 0;
238    overflow: hidden;
239    transition: .5s;
240}
241nav.globalMenuSp > .menu li li a {
242    border-top: 1px solid #eee;
243	background: #fff;
244	color: #000;
245}
246nav.globalMenuSp > .menu li:hover > ul > li {
247    height: 4rem;
248    overflow: visible;
249}
250	
251/* このクラスを、jQueryで付与・削除する */
252nav.globalMenuSp.active {
253  transform: translateY(0%);
254}
255  
256}

javascript
1/*ハンバーガーメニュ-*/
2
3$(function() {
4    $('.hamburger').click(function() {
5        $(this).toggleClass('active');
6 
7        if ($(this).hasClass('active')) {
8            $('.globalMenuSp').addClass('active');
9        } else {
10            $('.globalMenuSp').removeClass('active');
11        }
12    });
13});

試したこと

ただ常に表示するだけなら、中の要素等のinline-block等にすれば可能は可能なのですが、中の要素が下の要素に被ってしまいます。

理想は下記のような形です。

下記のサイトのコードも拝見したのですが、上手くいきません。
どうも応用力にまだまだ乏しく、きちんと地盤の知識を身につけていかないといけないと痛感してる未熟者ですが、宜しくお願い致します。

https://icom-kyoto-2019.org/jp/

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

回答1件

ベストアンサー

下記の2箇所を削除してください。

css
1@media screen and (max-width: 1000px) {
2  /* 1000px以下に適用されるCSS */
3
4  .header_btn{
5    display: none;
6  }
7
8  .menu {
9    margin: 0 auto;
10    width: 100%;
11  }
12
13
14  .menu li {
15    list-style: none;
16    position: relative;
17 /*   height: 4rem;  これを削除 */
18  }
19 
20
21/* 中略 */
22
23  nav.globalMenuSp {
24 /*   position: fixed; これを削除  */
25    z-index : 2;
26    top  : -5px;
27    left : 0;
28    color: #000;
29    background: #fff;
30    text-align: center;
31    transform: translateY(-100%);
32    transition: all 0.6s;
33    width: 100%;
34  }
35
36/* 後略 */