ドロップダウンメニューで一覧のリンクが押せない

前提・実現したいこと

ドロップダウンメニューをスマホサイトに使いたいのですが
リンク先が押せない事態が発生しております。

メニューの一覧項目を押すとドロップダウンメニューが閉じるだけで
リンク先に飛びません。

ドロップダウンメニュー全体に閉じたり開いたりする
機能がかかってしまっているのだと思いますが直し方がわかりません。
どうかご指導よろしくお願いします。

該当のソースコード

HTML
1<div id="menu">
2
3<div>
4<a href="#menu" class="menuopen">
5<img src="画像URL" width="30px">
6</a>
7
8<a href="#close" class="menuclose">
9<img src="画像URL" width="30px">
10</div>
11
12<ul>		
13<li><a href="リンク先1URL">リンク先1</a></li>
14<li><a href="リンク先2URL">リンク先2</a></li>
15<li><a href="リンク先3URL">リンク先3</a></li>
16<li><a href="リンク先4URL">リンク先4</a></li>
17</ul>
18</div>

CSS
1/****メニュー全体****/
2#menu{
3	/*配置*/
4	position: absolute;
5	top: 0;
6	left: 0;
7	width: 100%;
8	height: 100%;
9	pointer-events: none;
10	z-index: 100;
11}
12
13/****メニュー開閉ボタン****/
14#menu div{
15	/*デザイン*/
16	width: 30px;
17	height: 30px;
18	background: rgba(200,200,200,1);
19	/*配置*/
20	overflow: hidden;
21	position: absolute;
22	top: 0;
23	right: 0;
24margin-top:15px;
25}
26
27#menu .menuopen{
28	/*デザイン*/
29	color: rgba(255,255,255,1);
30	font-size: 20px;
31	/*配置*/
32	display: block;
33	width: 100%;
34	height: 100%;
35	position: absolute;
36	top: 0;
37	left: 0;
38	pointer-events: auto;
39	
40}
41
42#menu .menuclose{
43	/*デザイン*/
44	color: rgba(255,255,255,1);
45	font-size: 20px;
46	/*配置*/
47	display: none;
48	width: 100%;
49	height: 100%;
50	position: absolute;
51	top: 0;
52	left: 0;
53	pointer-events: auto;
54	
55}
56
57/****メニュー一覧****/
58#menu ul{
59	/*デザイン*/
60	background: #bb3c21;
61	width: 100%;
62	/*配置*/
63	position: absolute;
64	top: 30px;
65	right: 0;
66	margin-top:15px;
67
68}
69
70#menu li{
71	/*アニメーション*/
72	-webkit-transition: all 0.3s ease 0s;
73	transition: all 0.3s ease 0s;
74	/*デザイン*/
75	padding: 0 10px;
76	color: rgba(0,0,0,1);
77	border-bottom: 0px rgba(255,255,255,1) solid;
78	height: 0;
79	/*配置*/
80	overflow: hidden;
81	pointer-events: auto;
82	
83}
84
85/****メニューオープン時****/
86#menu:target .menuopen{
87	/*配置*/
88	display: none;
89
90}
91
92#menu:target .menuclose{
93	/*配置*/
94	display: block;
95
96}
97
98#menu:target li{
99	/*デザイン*/
100	padding: 10px;
101	height: 10px;
102	border-bottom: 1px rgba(255,255,255,1) solid;
103
104}
105

yambejp

2019/05/07 02:22

きちんとmarkdown処理をしてくださいとくに何もせずに行頭に#を置くと見出しになってしまって非常に見にくいです

spica-o

2019/05/07 02:25

ありがとうございます。#を置くと見出しになってしまうのは知りませんでした。

yambejp

2019/05/07 02:50

ソースを囲むように上下に「```」をそれぞれ付加してください

spica-o

2019/05/07 03:32

ありがとうございます。綺麗にコードを表示し直しているときに【HTML】 <a href="#close" class="menuclose"> <img src="画像URL" width="30px"> </a>←これを追加しているのを忘れていたことに気づきました！ </div> とても恥ずかしいですが解決いたしました＾＾；ありがとうございました。