アンカータグは一見正しくリンクされていますが、正常に動作していません

Question

なぜこのようなことが起こっているのかわかりません。ナビゲーションバーが正常に動作していて、アンカーリンク自体は実際のリンクですが、リロードするか、完全に白い画面になります。ここで

は唯一UL自体と添付CSS

http://s.codepen.io/boomerang/7e523d9a7efa11d1199da37a32c176ac1483413552850/index.html

.menu { 
 
    position: fixed; 
 
    z-index: 999; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #3f2e38; 
 
    border-radius: 0px 0px 30px 30px; 
 
    box-shadow: 0px 2px 4px #3f2e38; 
 
} 
 
ul.menu li a { 
 
    width: 100px; 
 
    height: 40px; 
 
    font-family: dosis; 
 
    display: inline-block; 
 
    color: #e6e1ea; 
 
    text-align: center; 
 
    transition: .3s; 
 
    font-size: 20px; 
 
} 
 
ul.menu li { 
 
    float: left; 
 
} 
 
ul.menu li a:hover { 
 
    background-color: #59404f; 
 
} 
 
/*header text*/ 
 

 
.texttwo { 
 
    font-family: dosis; 
 
    font-size: 72px; 
 
}

<header> 
 
    <nav> 
 
    <ul class="menu"> 
 
     <li><a href "#home">Home</a> 
 
     </li> 
 
     <li><a href "#gallery">Gallery</a> 
 
     </li> 
 
     <li><a href "#portfolio">Portfolio</a> 
 
     </li> 
 
     <li><a href "#contact">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 

 
<div> 
 
    <h1 class="texttwo" id="gallery">Gallery</h1> 
 
</div> 
 

 
<div> 
 
    <h1 class="texttwo" id="portfolio">Portfolio</h1> 
 
</div> 
 

 
<div> 
 
    <h1 class="texttwo" id="contact">Contact</h1> 
 
</div>

Answer 1

あなたが欠落している=記号が含まれ、ページへのリンクです<a href="#"></a>

.menu { 
 
    position: fixed; 
 
    z-index: 999; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #3f2e38; 
 
    border-radius: 0px 0px 30px 30px; 
 
    box-shadow: 0px 2px 4px #3f2e38; 
 
} 
 
ul.menu li a { 
 
    width: 100px; 
 
    height: 40px; 
 
    font-family: dosis; 
 
    display: inline-block; 
 
    color: #e6e1ea; 
 
    text-align: center; 
 
    transition: .3s; 
 
    font-size: 20px; 
 
} 
 
ul.menu li { 
 
    float: left; 
 
} 
 
ul.menu li a:hover { 
 
    background-color: #59404f; 
 
} 
 
/*header text*/ 
 

 
.texttwo { 
 
    font-family: dosis; 
 
    font-size: 72px; 
 
}

<header> 
 
    <nav> 
 
    <ul class="menu"> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#gallery">Gallery</a> 
 
     </li> 
 
     <li><a href="#portfolio">Portfolio</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 

 
<div> 
 
    <h1 class="texttwo" id="gallery">Gallery</h1> 
 
</div> 
 

 
<div> 
 
    <h1 class="texttwo" id="portfolio">Portfolio</h1> 
 
</div> 
 

 
<div> 
 
    <h1 class="texttwo" id="contact">Contact</h1> 
 
</div>