html内のリンクが全て無効になってしまいました

コード
```### 前提・実現したいこと

aタグのリンクを反映させたいです。
検証からエラーを探しても分かりませんでした。
positionプロパティは使ってますが、
z-indexは使用していません。



### 該当のソースコード
```html
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>abcどうぶつえん</title>
    <link href="style-copy.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="wrap">
        <div class="top topimg">
            <h1 class="hide"><a href="index-copy.html" >abc動物園</a></h1>
               <div class="topcopy">
                ここは自然の真っ只中、本物の動物に出会う場所。
            </div><!--topcopy-->
            </div><!--top topimg-->
        <header>
           <nav>
               <ul>
                   <li class="btn1"><a href="#" >HOME</a></li>
                   <li class="btn2"><a href="#" >INFORMATION</a></li>
                   <li class="btn3"><a href="#" >ANIMALS</a></li>
                   <li class="btn4"><a href="#" >SHOP</a></li>
                   <li class="btn5"><a href="#" >EVENT</a></li>
                   <li class="btn6"><a href="#" >CONTACT</a></li>
               </ul>
           </nav>
            
        </header>
    </div><!--wrap-->
</body>

</html>

css
1
2@charset "UTF-8";
3
4* {
5    margin: 0;
6    padding: 0;
7    font-family: "Myriad Pro";
8}
9img{
10    vertical-align: bottom;
11}
12ul{
13    list-style-type: none;
14}
15a{
16    text-decoration: none;
17}
18body {
19    
20}
21.wrap{
22    width: 100vw;
23}
24.hide{
25    text-indent: 100%; white-space: nowrap; overflow: hidden;
26}
27
28.top { 
29    width: 100vw;
30    display: flex;
31    justify-content: center;
32    align-items: center;
33    position: relative;
34}
35.topimg{
36    background-image: url(images/abczoo.jpg) ;
37    height: 0;
38    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
39    padding-top: 56.25%;
40    background-size: contain;
41}
42h1 {
43    background-image: url(images/logo.png) ;
44    background-repeat: no-repeat;
45    background-size: contain;
46    position: fixed;
47    left: 10px;top: 10px; 
48    opacity: 100%;
49/*
50    text-indent: 100%; white-space: nowrap; overflow: hidden;
51*/
52}
53.topcopy {
54    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
55    color: #fff;
56    letter-spacing: 0.2em;
57    position: absolute; right: 0; top: 92%;
58}
59
60nav ul{
61    display: flex;
62    justify-content: flex-end;
63    width:100vw;
64    position: relative;
65    vertical-align: middle;
66    background-color: #000009;
67
68}
69nav li{
70    position: absolute;
71    width: 100%;
72    position: relative;
73    min-width: 120px;
74    min-height: 44px;
75    display: block;
76    text-indent: 100%;
77    white-space: nowrap;
78    overflow: hidden;
79
80}
81.btn1{
82    background-image: url(images/1x/1home.jpg);
83    background-repeat: no-repeat;
84}
85.btn2{
86    background-image: url(images/1x/2info.jpg);
87    background-repeat: no-repeat;
88}
89.btn3{
90    background-image: url(images/1x/3animal.jpg);
91    background-repeat: no-repeat;
92}
93.btn4{
94    background-image: url(images/1x/4shop.jpg);
95    background-repeat: no-repeat;
96}
97.btn5{
98    background-image: url(images/1x/5event.jpg);
99        background-repeat: no-repeat;
100}
101.btn6{
102    background-image: url(images/1x/6contact.jpg);
103    background-repeat: no-repeat;
104}
105.btn1 a:hover{
106    background-image: url(images/1x/21home.jpg);
107    background-repeat: no-repeat;
108}
109.btn2 a:hover{
110    background-image: url(images/1x/22info.jpg);
111    background-repeat: no-repeat;
112}
113.btn3 a:hover{
114    background-image: url(images/1x/23animal.jpg);
115    background-repeat: no-repeat;
116}
117.btn4 a:hover{
118    background-image: url(images/1x/24shop.jpg);
119    background-repeat: no-repeat;
120}
121.btn5 a:hover{
122    background-image: url(images/1x/25event.jpg);
123    background-repeat: no-repeat;
124}
125.btn6 a:hover{
126    background-image: url(images/1x/26contact.jpg);
127    background-repeat: no-repeat;
128}
129
130nav a{
131    height: 100%;
132}
133
134
135/* SP向けの設定 */
136@media screen and (max-width: 720px) {
137    .topcopy {
138        font-size: 18px;
139    }
140    nav ul{
141        margin: 0 auto;
142    }
143}
144
145/* PC向けの設定 */
146@media screen and (min-width: 721px) {
147    .topcopy {
148        font-size: 26px;
149    }
150}

m.ts10806

2020/10/21 01:34

コードはマークダウンのcode機能にてご提示ください

miyabi_pudding

2020/10/21 01:42

> html内のリンクが全て無効になってしまいました > aタグのリンクを反映させたいです。これでは何が起きているのか、どうしたいのかがまったくわかりません。コードをみた限りでは、 h1 > aが表示されないスタイルとなっていますが、そういうことですか？？

kajikajisan

2020/10/21 01:45

> コードはマークダウンのcode機能にてご提示ください初めてで使い方が分からなくて申し訳ありません。 code機能というのはどう使えば良いでしょうか？

kajikajisan

2020/10/21 01:47

> h1 > aが表示されないスタイルとなっていますが、そういうことですか？？ h1もliも文字は見えなくして背景画像でクリック出来るようにしたいのです。

m.ts10806

2020/10/21 02:02

ヘルプページにもありますし過去質問にもあります。 https://teratail.com/questions/238564

kajikajisan

2020/10/21 02:17

ヘルプページありがとうございました。

m.ts10806

2020/10/21 02:27

細かくて申し訳ないですが、htmlのほうもcssと同じく ```html のようにしてもらえたらと。なるべく実際のコード以外が入り込まない方がこちらの手元で確認しやすいので。

m.ts10806

2020/10/21 02:29 編集

あと、「エラーを探しても」とのことですが、html,cssはエラーがでなくて、本当にコードのとおりに描画されるだけとなります。「文法は間違いないか」「整合性は取れているか」を確認することになります。前者の文法についてはチェックしてくれるサイトはありますし、チェック機能のあるエディタで確認はできます。

kajikajisan

2020/10/21 02:38

エディタのエラーマークは出ていません。検証も同じく間違いがあればエラーが出る物だと思っていました。無知すぎて本当にすみません。