<a>タグがクリックできない問題について

Question

実現したいこと

<a>タグがクリックできない問題を解決する

前提

ここに質問の内容を詳しく書いてください。

headerのナビゲーションメニューを全ページに表示したいのですが、
下層ページはすべてテキストのみの表示で、クリックができません。
index.htmlでは正常に動作しています。
また、横並びのメニューと、ハンバーガーメニューの２種類を使用しています。
クリックできないのは、下層ページの横並びのメニューのみです。

どなたか、ご教示いただけましたら幸いです。

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

エラーメッセージ

該当のソースコード

<nav class="pc_nav">
  <ul class="menu">
    <li><a href="index.html">home</a></li>
    <li><a href="about.html">about</a></li>
    <li><a href="salon.html">salon</a></li>
    <li><a href="menu.html">menu</a></li>
    
    <li><a href="#">instagram</a></li>
  </ul>
</nav>

試したこと

.pc_nav ul li a {
z-index: 100;
}
上記CSSを指定し重なり順を上に。

補足情報（FW/ツールのバージョンなど）

Comments

[yambejp]

例示されたソースは普通にリンク先に飛びそうです。
codepenなど挙動がわかるサイトに挙動しないというソースをあげられませんか？

[Lhankor_Mhy]

階層の違いでリンクができないとのこと、おそらくCSSの相対パスを書き間違えているとか、そういう話だと思います。404が返ってきてないか、開発者ツールなどでご確認されてはどうでしょうか。

[osashimi_]

codepen、開発者ツールを使用して確認してみたところ
開発者ツールで選択ができず、ヘッダーのなにかの要素に隠れてしまっていることがわかりました。
z-indexでは解決できなかったのですが、どの要素に何を指定すれば良いのでしょうか？

[yambejp]

codepenの具体的な例示はないのですか？

Answer 1

ナビゲーション下の<h1>に付けていたスタイルの指定が原因でした(ふわっと出てくるもの)
ブロック要素にするか、削除することで解決できました。
皆さまお答えいただきありがとうございました。