css だけで実装するハンバーガーメニューで、aタグ使うと不具合発生

#ハンバーガーメニューのコンテンツ内にaタグ使うと表示されなくなりました。

サルワカにしたがって、ハンバーガーメニューを作ったのですが......
CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）

メニュー内の表示、つまり後に引用するHTML文の内、以下で不具合が発生します。

HTML
1<div class="header-item global-menu">
2    <ul>
3        <li class="global-menu-item">
4            <a href="#">HOME</a>
5        <li>
6　　　　 <!--略-->
7    </ul>
8</div>

上記のようにしていると、ドロワーとして横から出てくる白いベタ色、およびその上に表示される筈の文字が表示されなくなりました。

いくらかいじってみていると、どうやらリンクのaタグ、HOMEを囲んでいるaタグが悪さをしているようです。
テストで、以下のように、aタグを削除して、ただの文字列にしたら問題なく表示されました。

HTML
1        <li class="global-menu-item">
2　　　　　　　HOME
3        <li>

ただ、やはりページ遷移のためのドロワーであるため、aタグ使えないのは流石に困ってしまうのですが、
解決する手段、どなたかわかるでしょうか？？

ちなみに、サルワカサイトでデモ画面として用意されているcodepenで、
aタグを使った場合は、特に問題なく表示されました。

となると、私の書いた別部分のコードとの相性がよくなかった。ということだとは思うのですが、
2時間ほど探してもどこが悪いのか検討がつかず、お伺いする次第です。

何卒宜しくお願いいたします。

以下が、該当部分のHTML/CSSです。

HTML
1        <header>
2            <div class="header-area">
3                <div class="header-item logo">
4                    <h1><a href="#">SITE NAME<a></h1>
5                </div>
6                <!-- for humberger nav-menu -->
7                <div id="nav-drawer">
8                    <input id="nav-input" type="checkbox" name="nav-input" class="nav-unshown">
9                    <label id="nav-open" for="nav-input"><span></span></label>
10                    <label class="nav-unshown" id="nav-close" for="nav-input"></label>
11                    <div class="header-item global-menu" id="nav-content">
12                        <ul>
13                            <li class="global-menu-item">
14                                <a href="#">HOME</a>
15                            </li><span class="global-menu-slash">/</span>
16                            <li class="global-menu-item">
17                                <a href="#">ABOUT</a>
18                            </li><span class="global-menu-slash">/</span>
19                            <li class="global-menu-item">
20                                <a href="#">WORK</a>
21                            </li><span class="global-menu-slash">/</span>
22                            <li class="global-menu-item">
23                                <a href="#">LESSON</a>
24                            </li>
25                        </ul>
26                    </div>
27                </div>
28            </div>
29        </header>

css
1/*=====================================
2* header
3*=====================================*/
4.header-area {
5    display: flex;
6    flex-direction: row;
7    justify-content: flex-end;
8    padding: 30px 30px;
9    width: 100%;
10    line-height: 1.5;
11    background-color: #ffffff;
12}
13
14.header-item.logo h1 a {
15    font-size: 2.0rem;
16}
17
18.header-item:first-child {
19    margin-right: auto;
20}
21
22.logo a {
23    color: #460000;
24}
25
26.header-item.global-menu ul {
27    color: #460000;
28}
29
30.global-menu {
31    text-align: end;
32}
33
34.global-menu-item {
35    display: inline-block;
36    margin: 0 30px;
37}
38
39
40li.global-menu-item a {
41    display: inline-block;
42    text-decoration: none;
43    color: #460000;
44    font-size: 1.6rem;
45    font-weight: bold;
46    line-height: 40px;
47}
48
49.global-menu-item a::after {
50    content: '';
51    display: block;
52    width: 0;
53    margin: -8px auto 0;
54    border-bottom: 4px solid #460000;
55    transition: width 0.1s ease-in-out;
56}
57
58.global-menu-item a:hover::after {
59    width: 100%;
60}
61
62.global-menu-item a:hover {
63    color: #460000;
64    transition: 0.1s;
65}
66
67#nav-open,
68#nav-input {
69    display: none;
70}
71
72/*=====================================
73* header for sp
74*=====================================*/
75
76@media(max-width: 768px) {
77    .header-item.logo h1 a {
78        font-size: 1.2rem;
79    }
80
81    .header-area {
82        padding: 20px 20px;
83    }
84
85    .global-menu-slash {
86        display: none;
87    }
88
89    /* humberger nav-menu*/
90    #nav-drawer {
91        position: relative;
92    }
93
94    /*チェックボックス等は非表示に*/
95    .nav-unshown {
96        display: none;
97    }
98
99    /*アイコンのスペース*/
100    #nav-open {
101        display: inline-block;
102        width: 30px;
103        height: 22px;
104        vertical-align: middle;
105    }
106
107    /*ハンバーガーアイコンをCSSだけで表現*/
108    #nav-open span,
109    #nav-open span:before,
110    #nav-open span:after {
111        position: absolute;
112        height: 3px;
113        /*線の太さ*/
114        width: 25px;
115        /*長さ*/
116        border-radius: 3px;
117        background: #460000;
118        display: block;
119        content: '';
120        cursor: pointer;
121    }
122
123    #nav-open span:before {
124        bottom: -8px;
125    }
126
127    #nav-open span:after {
128        bottom: -16px;
129    }
130
131    /*閉じる用の薄黒カバー*/
132    #nav-close {
133        display: none;
134        position: fixed;
135        z-index: 99;
136        top: 0;
137
138        left: 0;
139        width: 100%;
140        height: 100%;
141        background: black;
142        opacity: 0;
143        transition: .2s ease-in-out;
144    }
145
146
147    /*中身*/
148    #nav-content {
149        overflow: auto;
150        position: fixed;
151        top: 0;
152        left: 0;
153        z-index: 9999;
154        /*最前面に*/
155        width: 80%;
156        /*右側に隙間を作る（閉じるカバーを表示）*/
157        max-width: 330px;
158        /*最大幅（調整してください）*/
159        height: 100%;
160        background: #fff;
161        /*背景色*/
162        transition: .2s ease-in-out;
163        /*滑らかに表示*/
164        -webkit-transform: translateX(-105%);
165        transform: translateX(-105%);
166        /*左に隠しておく*/
167    }
168
169    /*チェックが入ったらもろもろ表示*/
170    #nav-input:checked~#nav-close {
171        display: block;
172        /*カバーを表示*/
173        opacity: .5;
174    }
175
176    #nav-input:checked~#nav-content {
177        -webkit-transform: translateX(0%);
178        transform: translateX(0%);
179        /*中身を表示（右へスライド）*/
180        box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
181    }
182
183}

Lhankor_Mhy

2019/07/27 04:47

ご提示のコードを当方で試してみましたが、『ドロワーとして横から出てくる白いベタ色、およびその上に表示される筈の文字が表示されなくなりました』という問題が再現しませんでした。 https://jsfiddle.net/Lhankor_Mhy/jc58awov/ ryujnoさんの環境では、↑のページで問題が再現しますか？問題が再現するのであれば、環境に原因があると思います。問題が再現しないのであれば、ご提示いただいていない部分に問題があるかもしれません。ご確認ください。