我是网站设计的新手，我正在为大学项目做这个网站。 所以我正在使用bootstrap，我得到了一个名为elegant的模板：
当我更改导航按钮以调用我已经创建的页面时，按钮只是消失，它仍然存在，我的意思是，如果我将鼠标悬停在它上面，它会消失，但一旦点击它就会消失。
这是模板附带的原件：
.w-nav-link {
position: relative;
display: inline-block;
vertical-align: top;
text-decoration: none;
color: #222;
padding: 20px;
text-align: left;
margin-left: auto;
margin-right: auto
}
.menu-li {
padding-top: 30px;
padding-bottom: 30px;
font-weight: 700;
}
.menu-li:hover {
border-top-style: none;
background-color: #2fde8f;
color: white;
font-weight: 700;
}<div class="w-nav navbar" data-collapse="medium" data-animation="default" data-duration="400" data-contain="1">
<div class="w-container nav">
<nav class="w-nav-menu nav-menu" role="navigation">
<a class="w-nav-link menu-li" href="#home">HOME</a>
<a class="w-nav-link menu-li" href="#about">ABOUT</a>
<a class="w-nav-link menu-li" href="#service">SERVICES</a>
<a class="w-nav-link menu-li" href="#portfolio">PORTFOLIO</a>
<a class="w-nav-link menu-li"href="#team">TEAM</a>
<a class="w-nav-link menu-li" href="#contact">CONTACT</a>
</nav>
<div class="w-nav-button">
<div class="w-icon-nav-menu"></div>
</div>
</div>
</div>
这就是我将其改为：
.w-nav-link {
position: relative;
display: inline-block;
vertical-align: top;
text-decoration: none;
color: #222;
padding: 20px;
text-align: left;
margin-left: auto;
margin-right: auto
}
.menu-li {
padding-top: 30px;
padding-bottom: 30px;
color: blue;
font-weight: 700;
}
.menu-li:hover {
border-top-style: none;
background-color: #2fde8f;
font-weight: 700;
}<div class="w-nav navbar" data-collapse="medium" data-animation="default" data-duration="400" data-contain="1">
<div class="w-container nav">
<nav class="w-nav-menu nav-menu" role="navigation">
<a class="w-nav-link menu-li" href="index.html">HOME</a>
<a class="w-nav-link menu-li" href="cadastro.html">ABOUT</a>
<a class="w-nav-link menu-li" href="#service">SERVICES</a>
</nav>
<div class="w-nav-button">
<div class="w-icon-nav-menu"></div>
</div>
</div>
</div>
所以，我的问题是，我该怎么办才能让这个按钮恢复正常？
