CSS：使用伪元素后禁用 <a> 标签

Question

我正在做一个 CSS 练习，其中要克隆旧的 BBC 网站。最初的问题是#topmenu li 的白色底部边框看起来很不稳定（我在下面的页面中包含了这段代码作为评论）

已通过使用伪元素添加右侧红色边框来解决此问题。但是，锚标记已被禁用。我认为这是由于红色边框的“绝对”位置，但我无法让菜单在没有绝对位置的情况下出现。现在，它看起来像我想要的那样，但顶部菜单链接不再起作用：http://jsbin.com/poginowibe/1/edit?output

关于如何解决这个问题的任何想法？任何帮助将不胜感激。

/* 这是白色底边框出现怪异时的原始代码 */

#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;
}

非常感谢！ :)

Answer 1

从你的 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 内容，包括 cmets 上方的这个。

我为悬停的蓝色做了边框底线，所以你可以看到它有效。

您正在使用顶部栏右侧站点上的图像#sphere。这应该是 CSS 中的背景图像，因此您不必处理 z-index，然后其余链接将起作用。

我所做的是，给 a 标签一些高度和行高，并将红色边框左绑定到它。我还删除了一些填充和边距。