Anchor Tags scheinbar mit IDs richtig verbunden, aber nicht funktioniert

Question

Ich konnte nicht herausfinden, warum das passiert, ich habe meine Navigationsleiste funktioniert gut und die Anker Links selbst sind tatsächliche Links, aber wenn ich sie auf die Seite klicken entweder neu laden oder komplett weißer Bildschirm.

Hier ist ein Link auf die Seite, enthalten nur die ul selbst und das beigefügte 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

Sie vermissen = Zeichen <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>