マイボタンとリンクのホバーが機能しなくなりました

Question

私は最近、私のポートフォリオページ上のナビゲーション更新を行っ：

My portfolio

て以来、私はリンクとリンク上で私ホバー/ Iクラス項目が機能していない上でクリックすることはできません。それはZ-インデックスと関係がありますか？私はそれが何であるかも知りません。 HTML/CSS/JS私はjsfiddleの上に置くようstackoverflowのために長すぎました：それはあなたの「#welcome .heroのように見えるjsfiddle repo

ナビゲーションメニュー

#menuToggle a 
{ 
    text-decoration: none; 
    color: #232323; 

    transition: color 0.3s ease; 
} 

#menuToggle a:hover 
{ 
    color: #fff; 
} 

#menuToggle 
{ 
    display: block; 
    position: relative; 
    top: 50px; 
    left: 50px; 

    z-index: 10; 

    -webkit-user-select: none; 
    user-select: none; 
} 

#menuToggle input 
{ 
    display: block; 
    width: 40px; 
    height: 32px; 
    position: absolute; 
    top: -7px; 
    left: -5px; 

    cursor: pointer; 

    opacity: 0; /* hide this */ 
    z-index: 2; /* and place it over the hamburger */ 

    -webkit-touch-callout: none; 
} 


#menuToggle span 
{ 
    display: block; 
    width: 33px; 
    height: 4px; 
    margin-bottom: 5px; 
    position: relative; 

    background: #f91791; 
    border-radius: 3px; 

    z-index: 3; 

    transform-origin: 4px 0px; 

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), 
       background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), 
       opacity 0.55s ease; 
} 

#menuToggle span:first-child 
{ 
    transform-origin: 0% 0%; 
} 

#menuToggle span:nth-last-child(2) 
{ 
    transform-origin: 0% 100%; 
} 

#menuToggle input:checked ~ span 
{ 
    opacity: 1; 
    transform: rotate(45deg) translate(-2px, -1px); 
    background: #232323; 
} 


#menuToggle input:checked ~ span:nth-last-child(3) 
{ 
    opacity: 0; 
    transform: rotate(0deg) scale(0.2, 0.2); 
} 


#menuToggle input:checked ~ span:nth-last-child(2) 
{ 
    opacity: 1; 
    transform: rotate(-45deg) translate(0, -1px); 
} 


#menu 
{ 
    position: absolute; 
    width: 1600px; 
    height: 1600px; 
    margin: -100px 0 0 -50px; 
    padding: 50px; 
    padding-top: 125px; 

    background: #f91791; 
    list-style-type: none; 
    -webkit-font-smoothing: antialiased; 
    /* to stop flickering of text in safari */ 

    transform-origin: 0% 0%; 
    transform: translate(-100%, 0); 

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); 
} 

#menu li{ 
    padding: 10px 0; 
    font-size: 115px; 
} 

#menu li hover{ 
    color: #fff; 
} 

#menuToggle input:checked ~ ul 
{ 
    transform: scale(1.0, 1.0); 
    opacity: 1; 
} 

NAV HTML

<section id="welcome"> 
     <header class="close"> 
      <nav role='navigation' id="menuToggle"> 
        <input type="checkbox" /> 
        <span></span> 
        <span></span> 
        <span></span> 
         <ul id="menu"> 
          <li><a href="#welcome">Home</a></li> 
          <li><a href="#about">About Me</a></li> 
          <li><a href="#portfolio">Testimonials</a></li> 
          <li><a href="#resume">Portfolio</a></li> 
          <li><a href="#contactMe">Contact Me</a></li> 
         </ul> 
        </div> 
       </nav> 
     </header> 

Answer 1

"ページをカバーしています。私は実際にはページ上でそれを使用して表示されません。あなたがヒーローイメージを使用するように見えないので、それを削除することがありますか？

Answer 2

あなたのページを右クリックして "inspect element"をクリックすると、404エラーが表示されます。私はページがこれらのファイルを見つけることができないと思うし、それらの機能を失っている。あなたは

#menu li hover{ 
    color: #fff; 
} 

にコロンが不足している

Answer 3

読み込みする必要があります。

#menu li:hover{ 
    color: #fff; 
} 

に役立ちます願っています。

Answer 4

どのように見えるのか分かりませんが、ヘッダーの位置を（固定ではなく）絶対に変更するとリンクが機能します。