ハンバーガーメニューのリストを一番上に表示したい。

前提・実現したいこと

レスポンシブデザインの中で、ハンバーガーメニューを作りたいです。
jqueryを使用した方が動きが作りやすいと思い、jqueryを使っています。
PC画面で表示していたナビバーはdisplay:none;で隠しています。

初めて質問するため、該当コードの箇所や質問方法が分かりにくく申し訳ありません。

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

アイコンをクリックした時に出現するリストを、本文と重ねて表示する事ができず困っています。

該当のソースコード

HTML
1 <div class="ham" id="ham">
2                                        <span class="ham_line ham_line1"></span>
3                                        <span class="ham_line ham_line2"></span>
4                                        <span class="ham_line ham_line3"></span>
5                                    </div>
6                                    <div class="menu_wrapper" id="menu_wrapper">
7                                        <div class="menu">
8                                            <ul class="m-ul">
9                                                <li class="m-li"><a href="#2">メニュー1</a></li>
10                                                <li class="m-li"><a href="#2">メニュー２</a></li>
11                                                <li class="m-li"><a href="#3">メニュー３</a></li>
12                                                <li class="m-li"><a href="#3">メニュー4</a></li>
13                                                <li class="m-li"><a href="#3">メニュー5</a></li>
14                                                <li class="m-li"><a href="#3">メニュー6</a></li>
15                                            </ul>
16                                        </div>
17                                    </div>

CSS
1/* ナビーのバーを変更 */
2.h-nav {
3    display: none;
4}
5.menu_wrapper {
6    float: initial;
7    display: grid;
8}
9li {
10    list-style: none;
11    color: #fff;
12    border-bottom: 1px solid #000;
13    padding: 10px ;
14}
15.menu {
16    position: relative;
17	width: 300px;
18    width: 100%;
19    left: 110%;
20	top: -20px;
21	background-color: rgb(51,51,51,.3);
22    transition: all 0.6s;
23}
24.clicked .menu {
25	left: 8px;
26}
27.h-imagebox {
28   z-index: 1;
29}
30
31/* ハンバーガーメニュー */
32.header {
33    position: relative;
34}
35.ham {
36    position: absolute;
37    right: 26px;
38    top: 30px;
39	width: 50px;
40	height: 50px;
41	cursor: pointer;
42    background-color: #fff;
43    border: 1px solid #000;
44}
45.ham_line {
46    position: absolute;
47    left: 10px;
48    width: 30px;
49    height: 4px;
50    background-color: #333333;
51    /* transition: all 0.3s; */
52}
53.ham_line1 {
54	top: 10px;
55}
56.ham_line2 {
57	top: 23px;
58}
59.ham_line3 {
60	top: 36px;
61}
62.clicked .ham_line1 {
63	transform: rotate(45deg);
64	top: 20px;
65}
66.clicked .ham_line2 {
67	width: 0px;
68}
69.clicked .ham_line3 {
70	transform: rotate(-45deg);
71	top: 20px;
72}

jquery
1const ham = document.getElementById('ham');
2
3ham.addEventListener('click', function() {
4  ham.classList.toggle('clicked');
5});
6  
7
8ham.addEventListener('click', function() {
9  ham.classList.toggle('clicked');
10});
11  
12
13const menu_wrapper = document.getElementById('menu_wrapper');
14ham.addEventListener('click', function() {
15	ham.classList.toggle('clicked');
16	menu_wrapper.classList.toggle('clicked');
17});