CSS:<；a>；使用伪元素后禁用标记

我正在做一个CSS练习，其中旧的BBC网站将被克隆。最初的问题是#topmenu li的白色底边看起来不稳定（我在下面的页面中添加了此代码作为注释）

这已经通过使用伪元素添加右红色边框得到了修复。但是，锚定标记已被禁用。我认为这是由于红色边框的“绝对”位置，但如果没有绝对位置，我无法使菜单按应有的方式显示。现在，它看起来像我想要的那样，但顶部菜单链接不再起作用：

关于如何解决这个问题有什么想法吗？任何帮助都将不胜感激

/*这是白色底边看起来很奇怪时的原始代码*/

#topmenudiv li {
    list-style: none;
    height: 100%;
    padding: 14px 15px 11px 15px;
    border-right: 1px solid #990800;
    float: left;
    position: relative;
    z-index: 1;
}

#topmenudiv li:hover {
    color: #ffffff;
    text-decoration: none;
    padding: 14px 15px 8px 15px;
    border-bottom: 3px solid #FFFFFF;
    outline: 0;
}

/*这是修复了不稳定外观但禁用了标记后的代码*/

#topmenudiv li {
    list-style: none;
    height: 100%;
    padding: 14px 15px 11px 15px;
    float: left;
    position: relative;
    z-index: 1;
}

#topmenudiv li:hover {
    color: #ffffff;
    text-decoration: none;
    padding: 14px 15px 8px 15px;
    border-bottom: 3px solid #FFFFFF;
    outline: 0;
}

#topmenudiv li::after {
    content: "";
    position: absolute;
    bottom: 0; top: 0; left: 0; right: 0;
    border-right: 1px solid #990800;
}

---

通过对Joerg的代码进行一些调整，我终于能够让它工作了

#topmenudiv ul {
    margin-top: 0px;
    padding: 0;
}

#topmenudiv li {
    list-style: none;
    height: 38px;
    line-height: 40px;
    float: left;
    position: relative;
    z-index: 3;
}

#topmenudiv li:hover {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 3px solid #FFFFFF;
    outline: 0;
}

#topmenudiv li a {
    height: 100% !important;
    font-size: 1em;
    line-height: 40px;
    border-right: 1px solid #990800;
    display: block;
    padding-left: 15px;
    padding-right: 15px;
}

#topmenudiv li a:hover {
    text-decoration: none;
}

非常感谢！：）

从css中删除#topmenudiv li:：after，并以以下方式更改#topmenudiv li:

#topmenudiv li {
    list-style: none;
    height: 100%;
    padding: 14px 15px 11px 15px;
    float: left;
    position: relative;
    z-index: 1;
    border-right: 1px solid #990800;
}

更新

使用此代码并参见以下备注：

#topmenudiv ul {
   height: 40px;
   margin: 0;
   padding: 0;
}

#topmenudiv li {
   list-style: none;
   height: 40px;
   float: left;
   border-bottom: 3px solid #FFFFFF;
}

#topmenudiv li:hover {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 3px solid blue;
  outline: 0;
}

#topmenudiv li a {
  height: 40px !important;
  font-size: 1em;
  line-height: 40px;
  border-right: 1px solid #990800;
  display: block;
  padding-left: 15px;
  padding-right: 15px;

}

#topmenudiv li a:hover {
  text-decoration: none;
}

删除CSS中的所有topmenudiv内容，也删除注释上方的这个内容

我为蓝色悬停画了边界底线，所以你可以看到它是有效的

您使用的图像位于顶栏的右侧位置#球体。这应该是CSS中的背景图像，因此您不必使用z-index，然后其余的链接就可以工作了

---

我所做的是，给a标签一些高度和线条高度，并将红色边框绑定到标签上。我还移除了一些填充物和边距。

欢迎使用Stack Overflow！将来，请在你的帖子中包含所有相关的代码，不要只包含代码托管站点的链接。你的帖子应该独立于任何其他资源；考虑一下如果这个网站将来会发生什么情况！谢谢，@Joerg，但是那样的话，白色底边的古怪外观就会重新出现。你能发布一张图片吗？我看不到白色的底边。只有当你将鼠标移到李氏底边上时，李氏底边下方的底边才会出现。这是截图。此[]显示带有#topmenudiv li:：after属性的代码。这个[]显示了没有#topmenudiv li:：after属性的代码。