html - 悬停不覆盖整个文本

Question

我在左上角有一个菜单栏，但是悬停和事件元素没有覆盖整个文本。我对此很陌生，页面还没有完成，所以不需要指出它看起来有多糟糕哈哈。整个页面都是挪威语，所以可能有点困惑。它应该是一种电影寄存器，我知道我的代码中可能有很多错误，但我现在想解决的问题是悬停和事件:)

这是我的 html:

    <!--MENUBAR-->

        <div id="nav">
          <ul class="first">

            <li><a class="active" href="startside.html">Startside</a>
            </li>
            <li><a href="minelån.html">Mine lån</a>
            </li>
            <li><a href="Minliste.html">Min liste</a>
            </li>
          </ul>
        </div>

      </header>

      <!-- LOGIN -->

      <form>
        <span class='login'>

        <label for="E-postadresse">E-postadresse</label>
        <input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />

        <label for="Passord">Passord</label>
        <input type="password" placeholder="Passord" id="Passord" />

        <input type="submit" value="Logg inn" />
        </span> 
      </form>
    </body>

    </html>

<!-- end snippet -->

和CSS:

/*MENUBAR*/

#nav {
    background-color: #999999;
    position: absolute;
    top:0px;
    padding-left: 85px;
    height: 50px;
    overflow: hidden;
    margin-top: -5px;
    left: -90px;
}

ul {
  list-style-type: none;
  margin: 0;
  font-size: 0;
  padding: 5px;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #808080;
}

.first li {
  display: inline-block;
}

li a {
    display:block;
    text-decoration: none;
    text-align: center;
    padding: 15px 20px;
    color: white;
    cursor:pointer;
    font-size: 16px;
}

li a:hover {
    background-color:#333333;
}
.active {
    background-color:#333333;
}

/* LOG IN*/

form {
    float:right;
    font-family: Arial, Helvetica, sans-serif;
}

.login {
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 50%;
    display: inline-block;
}

input{
    font-size: 90%;
}

Answer 1

你应该像这样删除 li 元素之间的空格

<ul class="first">

    <li><a class="active" href="startside.html">Startside</a>
    </li><li><a href="minelån.html">Mine lån</a>
    </li><li><a href="Minliste.html">Min liste</a></li>
  </ul>

这有点像 li 元素和 div 之间有空格的错误，如果它们是在新行上输入的。(如果解释有误，我很抱歉)。