錨標記似乎鏈接到標識正常，但不工作

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>