ロゴをクリックすると表示されるフローティングメニューが、非表示なのに選択されてしまいます。

Question

###ヘッダー内、ロゴをクリックすると表示されるフローティングメニューについて。非表示なのに選択される。

フローティングメニューにz-indexを使用し、ハンバーガーロゴ（3本線メニューロゴ）をクリックすると、最前面に表示する仕様を作りました。が、active時ではなくメニューが隠れている時にも、メニューが選択できるという事態が起きています。（説明が下手くそで申し訳ありません。画像のような状態です。）

その為、非表示になっているメニューがマウスオーバーすると選択されてしまう為、その後面にあるものが選択できなくなってしまっています。原因はおそらく、z-indexの指定方法などにあるんだろう…だと思いますが、解決方法がわかりません。。。
わかる方ぜひご回答お待ちしております。涙

コードは以下の通りです（全部載せると膨大な量なので、必要箇所のみです）
足りない部分ありましたら追加いたします。何とぞよろしくお願いいたします。

<header class="header">
    <div class="header_item">
         <a href="index.html"><img src="#" alt="サイトロゴ"></a>
                <div class="hamburger"> //ハンバーガーメニューロゴ//
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
            </div>

 <nav class="globalMenu">
     <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Faq</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
 </nav>
 </header>

 /*細かな仕様は一切除いています*/
 
 .header{
 z-index: 50;
 top: 0;
 }
 
.hamburger {
  display : block;
  position: fixed;
  z-index : 60;
  cursor: pointer;
  text-align: center;
}
 .hamburger.active {
 /*active時の様々な動き*/
 }
 
 nav.globalMenu {
 position: fixed;
 z-index : 51;
 opacity: 0;
 transition: opacity .6s ease, visibility .6s ease;
 }

↓ ※商品紹介の題名のところあたりまで、非表示になっているメニューがあり、スクロールしても後面の項目が選択できない状態です。

Answer 1

opacity: 0;で透明にしただけで、かつz-indexを大きい数値にしてますので選択出来てしまいます。

z-indexを他の要素より小さくする（-1とか）、あるいは height: 0; overflow: hidden; とするとか、、、

nav.globalMenu {
  position: fixed;
  z-index: -1;  /* 修正 */
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
}

Comments

[obebe_1103]

Hatena19　様
ご回答ありがとうございます。早速 z-indexの修正、heightとoverflowの方法を全て試してみたのですが、z-indexとoverflow:hidden; はなぜなのか、状況変わらず…
heightの方法は、通常時はうまく隠れてくれたのですが、active時になった時に表示されなくなってしまいました…　Hatena19様の説明がとてもわかりやすかったので、なぜ・・・葛藤です

[hatena19]

.hamburger.active の部分のコードが省略されていますので、それを見ないと原因は分からないです。
それを提示してもらえますか。
あと、.hamburgerをクリックしたときにナビメニューを表示ているコードも。提示のHTMLだとJSを使っていると思うのですが。

[obebe_1103]

hatena19様
お世話になっております。先日教えていただいてから、なぜだ・・・と色々試していたところ、「height:0; overflow:hidden;」の使用でたった今無事に動きました！
nav.globalMenu にこれら二つを記述し、さらにnav.globalMenu.active　でアクティブ時に「height:auto;」をつけたところ、ばっちりでした。
解決に導いてくださり、この度本当にありがとうございます！