Question

我今天对我的网站进行了一些更改，但突然我的菜单栏可能停止工作了。
据我所知，我没有为菜单栏更改任何内容，只是将第一部分更改为html视频而不是正常部分。
我的问题是我的代码强调悬停上的链接仅适用于网页的顶部，当你滚动一点它开始表现时，它不会在悬停时强调文字，现在每一个nd然后它只适用于你点击，其他时候下划线出现但不离开。
我希望有人知道什么是错的，这里是与菜单栏相关的部分的CSS代码和导航栏的HTML代码：
整页的CSS：

* {margin: 0; padding: 0;}

    .navTekst {
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        color: black;
        display: inline-block;
        float: left;
        padding: 24px 0px;
    }

    header {
        background: #fff;
        width: 100%;
        height: 70px;
        position: fixed;
        top: 0;
        left: 0;
        border-bottom: 2px solid #000;
        opacity: 0.9;
        z-index: 5;
    }

    header img {
        display: inline-block;
        float: left;
    }

    nav {
        float: right;
    }

    a {
        color: #FFE000;
        text-decoration: none;
        font-weight: lighter;
    }

    a:hover {
        color: #666;
    }

    ul {
        list-style: none;
    }

    li {
        display: inline-block;
        float: left;
        padding: 24px 10px;
    }

    .active {
        font-weight: bold;
        color: #ADADAD;
    }

    input {
        display: none;
    }

#vidSec { 
    /*position:absolute; 
    bottom:0;    
    opacity: 0;*/
}

.titelFont {
    font-family: Lato;
    font-size: 50px;
}

.tekstFont {
    font-family: OpenSans;
}

body {
    color: #fff;
    font-family: 'open-sans-bold'; 
    font-size: 20px;
    text-align: center;
}

section {
    min-height: 100vh;
}

.eind {
    height: auto;
    background-image: url("test.png");
}

/*section #menuSection {
    height: 70px;
    }*/

#start {    
    /*position: relative;*/
    /*background: #43b29d #69C1B1;*/
    background: -webkit-linear-gradient(315deg, #95D7B1 20%, #27ae60 80%); /* Chrome 10+, Saf5.1+ */
    background:    -moz-linear-gradient(315deg, #95D7B1 20%, #27ae60 80%); /* FF3.6+ */
    background:     -ms-linear-gradient(315deg, #95D7B1 20%, #27ae60 80%); /* IE10 */
    background:      -o-linear-gradient(315deg, #95D7B1 20%, #27ae60 80%); /* Opera 11.10+ */
    background:         linear-gradient(315deg, #95D7B1 20%, #27ae60 80%); /* W3C */
}

#startInhoud
{
margin-left:auto;
margin-right:auto;

background-color:white;
border-radius: 20px;
border: solid;
border-top-color: black;
border-width: 2px;

top: 3px;
width: 75%;
display: inline: block;
}

视频标记的CSS：

.transparant {
  margin: 0;
  background: transparent; 
}
.voetTekst {
    font-size: 20px;
}
video { 
  color: red;
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-image: url('../img/twee.png') no-repeat; 
  background-size: cover;
}
h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .3rem;
}

#tekstBegin {
    color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.75);
    font-size: 60px;
    text-align: center;
}

.vidSection {
    height: 100vh;
}

.vidfilter {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 800px) {
  .bgvid { 
  background: url('../img/screenshot2.jpg') #000 no-repeat center center fixed; 
  }

  #bgvid { display: none; }

  #vidSec { 
  background: url('../img/screenshot2.jpg') #000 no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

  #tekstBegin {
    color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.75);
    font-size: 6vh;
    text-align: center;
    }

    .voetTekst {
    font-size: 2vh;
    }
}

页面第一部分的Html代码：

<header>
    <img src="SFlogo.png" height="70" width="70">
    <p class="navTekst">Samformatica</p>
        <nav class="navi"> 
            <input type="checkbox" id="toggle" checked>   
                <label for="toggle" class="button"></label>
                    <section class="main-content">
                         <ul>
                            <li><a href="#">Start</a></li>
                            <li><a href="#">Over</a></li>
                            <li><a href="#">Websites</a></li>
                            <li><a href="#">Contact</a></li>
                            <li><a href="#">Klant</a></li>
                        </ul>
                    </section>
        </nav>
</header>

<section id="vidSec" class="vidfilter bgvid vidSection">
<LINK href="video.css" rel="stylesheet" type="text/css">
<video autoplay loop poster="img/screenshot.jpg" id="bgvid">
<source src="video/spin.webm" type="video/webm">
<source src="video/spin.mp4" type="video/mp4">
<img src="img/screenshot.jpg" title="Your browser does not support the <video> tag" />
</video>
<div id="tekstBegin">
Samformatica
<p class="voetTekst">Voor uw plek op het web</p>
</div>
</section>

<div id="startSnap"></div>

<section id="start">
<?php
if($gestuurd=="ja"){
echo "<span style='background-color: #85FF5C'>Uw bericht is verstuurd, een kopie van dit bericht is naar uw emailadres gestuurd, houdt uw spam voor de zekerheid in de gaten.</span><br>";
}
?>
<p class="titelFont">Start</p>
<div id="startInhoud">
<p class="tekstFont">
Hallo, mijn naam is Sam. Ik ben eerstejaarsstudent Informatica aan de HAN. Ik kan voor u een persoonlijke website bouwen.<br>
Ik heet u welkom op mijn site, waarvoor bent u hier:<br>
<a href="#websitesSnap" class="eigen scroll" class="scroll">Een eigen website</a><br>
<p style="font-size: 17"><i>Wilt u een eigen website? Kijk naar wat ik aanbied.</i></p><br>
<a href="#klantSnap" class="eigen scroll">Inloggen</a><br>
<p style="font-size: 17"><i>Log hier in op uw account om te kijken hoever uw site is, als u een bestaande klant bent.</i></p><br><br>
U kunt in de navigatiebalk meer mogelijkheden vinden.<br>
</p>
</div>
</section>

悬停在我的菜单栏上的文字装饰仅适用于页面顶部

0 个答案: