如何将我的边框顶部移到页面的顶部？

Question

我正在尝试在导航栏上进行悬停效果，我想在li上方有一条线，即光标所在的位置。

我为li提供了一个border-top属性，但我需要将该行放在页面的顶部，而不是直接在li的顶部。

#liste li:hover{
    border-top: 3px solid;
    color: #5CABD1;
}

我已经知道问题出在border top属性上，但是我不知道其他方法可以在li的顶部加上一条线。这是我的导航栏和当前的边框效果的照片。

Answer 1

问题似乎是您将悬停行为分配给了列表项，而不是链接本身。如果容器链接一直延伸到顶行，则它应该重叠并正确显示。

Answer 2

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<style>
 ul {
  list-style-type: none;
  margin-top: 60px;
  padding: 0;
  overflow: hidden;
 }

 li {
  float: left;
 }

 li a {
 display: block;
 padding: 8px;
 background-color: #dddddd;
 text-decoration:none
}
li a:hover:before{
  content:'';
  position:absolute;
  top:10px;
  border-top:2px solid red;
  width:40px;
  height:1px;
}
</style>

您可以使用伪元素来实现。这是一个可以悬停的演示 https://jsfiddle.net/Lnso4u6z/3/