ハンバーガーメニューが閉じている状態でメニューボタンが見えていないにもかかわらず、リンクが押せてしまう。

前提・実現したいこと

ウェブサイト制作中で、行き詰ってしまいました。Googleでも調べましたが、解決方法が見つからず、こちらに質問させて頂きます。

【実現したいこと】
ハンバーガーメニューが閉じている状態で、メニューボタンは隠れている状態であるのに、なぜかマウスはhoverし、リンク先が押せてしまいます。閉じている状態ではリンクが反応しないようにしたいです。

該当のソースコード

html
1
2<div class="hamburger">
3  <span></span>
4  <span></span>
5  <span></span>
6</div>
7
8<nav class="globalMenuSp">
9    <ul>
10
11        <li><a href="#news"><span class="animation"><img src="img/nav_news.svg" alt="News" /></span></a><a href="#news"><span class="animation">News</span></a></li>
12
13    <li><a href="Room&amp;Facility/index.html"><span class="animation"><img src="img/nav_room&facility.svg" alt="Room and Facility" /></span></a><a href="Room&amp;Facility/index.html"><span class="animation">Room and Facility</span></a></li>
14
15    <li><a href="Access/index.html"><span class="animation"><img src="img/nav_access.svg" alt="Access" /></span><a href="Access/index.html"><span class="animation">Access</span></a></li>
16
17    <li><a href="Booking/index.html"><span class="animation"><img src="img/nav_booking.svg" alt="Booking" /></span></a><a href="Booking/index.html"><span class="animation">Booking</span></a></li>
18
19    <li><a href="Rent_a_house/index.html"><span class="animation"><img src="img/nav_rent_a_house.svg" alt="Rent a house" /></span></a><a href="Rent_a_house/index.html"><span class="animation">Rent a house</span></a></li>
20
21    <li><a href="Job_offer/index.html"><span class="animation"><img src="img/nav_job_offer.svg" alt="Job offer" /></span></a><a href="Job_offer/index.html"><span class="animation">Job offer</span></a></li>
22
23    </ul>
24</nav>
25

css
1
2.hamburger {
3  display : block;
4  position: fixed;
5  z-index : 3;
6  right : 13px;
7  top   : 12px;
8  width : 42px;
9  height: 42px;
10  cursor: pointer;
11  text-align: center;
12  border-radius: 35%;
13  background:rgba(255,255,255,0.8) ;
14  border: 1.8px solid #275a6e;
15}
16.hamburger span {
17  display : block;
18  position: absolute;
19  width   : 25px;
20  height  : 2px ;
21  left    : 8.5px;
22  background : #275a6e;
23  -webkit-transition: 0.3s ease-in-out;
24  -moz-transition   : 0.3s ease-in-out;
25  transition        : 0.3s ease-in-out;
26}
27.hamburger span:nth-child(1) {
28  top: 12px;
29}
30.hamburger span:nth-child(2) {
31  top: 20px;
32}
33.hamburger span:nth-child(3) {
34  top: 28px;
35}
36
37/* ナビ開いてる時のボタン */
38.hamburger.active {
39  -webkit-transition: all 0.3s ease-in-out;
40  -o-transition     : all 0.3s ease-in-out;
41  transition        : all 0.3s ease-in-out;
42  -webkit-transition-delay: 0.6s;
43  -o-transition-delay     : 0.6s;
44  transition-delay        : 0.6s;
45  -webkit-transform: rotate(45deg);
46  -ms-transform    : rotate(45deg);
47  -o-transform     : rotate(45deg);
48  transform        : rotate(45deg);
49  border-radius: none;
50  background:none ;
51  border: none;
52}
53.hamburger.active span:nth-child(2){
54  width: 0px;
55}
56.hamburger.active span:nth-child(1),
57.hamburger.active span:nth-child(3){
58  background :#fff;
59  -webkit-transition-delay: 0.3s;
60  -o-transition-delay: 0.3s;
61  transition-delay: 0.3s;
62}
63.hamburger.active span:nth-child(1){
64  -webkit-transform: translateY(0px);
65  -ms-transform    : translateY(0px);
66  -o-transform     : translateY(0px);
67  transform        : translateY(0px);
68}
69
70.hamburger.active span:nth-child(3){
71  -webkit-transform: translateY(-16px) rotate(90deg);
72  -ms-transform: translateY(-16px) rotate(90deg);
73  -o-transform : translateY(-16px) rotate(90deg);
74  transform    : translateY(-16px) rotate(90deg);
75}
76
77
78nav.globalMenuSp {
79  position: fixed;
80  z-index : 2;
81  top  : 0;
82  left : 0;
83  height: 100%;
84  color: #fff;
85  background: rgba(0,0,0,0.7);
86  text-align: center;
87  width: 100%;
88  opacity: 0;
89  transition: opacity .6s ease, visibility .6s ease;
90}
91
92nav.globalMenuSp ul {
93	width: 100%;
94	display: flex;
95	flex-direction: row;
96	flex-wrap: wrap;
97	justify-content: center;
98	margin-top: 0;
99	margin-right: auto;
100	margin-bottom: 0;
101	margin-left: auto;
102	padding-top: 150px;
103	padding-right: 0;
104	padding-bottom: 0;
105	padding-left: 0;
106}
107
108nav.globalMenuSp ul li {
109	display: flex;
110	flex-direction: column;
111	list-style-type: none;
112	padding: 0;
113	width: 33%;
114	transition: .4s all;
115	font-family: "Koruri Regular sub";
116	font-size: 0.8rem;
117}
118
119nav.globalMenuSp ul li img {
120	width: 50%;
121	margin-left: 25%;
122	margin-right: 25%;
123	margin-bottom: -20px;
124}
125	
126
127nav.globalMenuSp ul li:last-child {
128  padding-bottom: 0;
129}
130nav.globalMenuSp ul li:hover{
131  background :#ddd;
132}
133
134nav.globalMenuSp ul li a {
135  display: block;
136  color: #fff;
137  padding: 1em 0;
138  text-decoration :none;
139}
140
141/* このクラスを、jQueryで付与・削除する */
142nav.globalMenuSp.active {
143  opacity: 100;
144  visibility: visible;
145
146}
147

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