CSS第二个菜单，位于菜单下而不是每个类别下

Question

我是这里的新手，已经将此资源用作搜索功能，但今天我很困惑，想寻求建议和选择。

这是我的网站。

http://www56.myfantasyleague.com/2016/home/77769

以单词 MANAGEMENT 开头的第二个菜单，我想将鼠标悬停在 1px 虚线上，以模仿 CBS 网站鼠标左上角的此操作，在此处显示

http://www.cbssports.com/collegebasketball/ncaa-tournament/brackets/viewable_men

如果您将鼠标悬停在左上角NCAABB>> CBS SPORTS HOME、FANTASY、ETC，您会在每个类别下看到浅蓝色过渡...

我想要那个功能，替换我的 1px 点底边框。当我添加此代码时，它会捕获导航菜单的整个块而不是链接名称。

ul.quicknav > li > a::before {
  background-color: #3987d9;
  content: "";
  height: 0px;
  left: 0px;
  opacity: 0.3;
  position: absolute;
  right: 0px;
  top: 100%;
  transition: height 0.2s ease 0s;
}

ul.quicknav li a:hover::before {
  height: 6px;
}

有人可以通过编辑此 css 代码来帮助我实现这一目标吗？希望这很容易，而不是我必须为每个链接的菜单栏添加 div 标记或 class 标记...

谢谢！ 棍棒

Answer 1

您的ul.quicknav > li > a::before 中似乎缺少display: block;。如果您使用position: absolute;，请不要忘记将position: relative; 添加到父级（在本例中为ul.quicknav > li > a）。

或者，您可以在ul.quicknav > li > a 上使用box-shadow，而不是使用伪元素。

ul.quicknav > li > a{
    box-shadow: #3987d9 0 0 0 0;
    transition: box-shadow .2s;
    -webkit-transition:box-shadow .2s; // Don't forget the -webkit- version...
}

ul.quicknav > li > a:hover{
    box-shadow: #3987d9 0 6px 0 0;
}

您的代码已经有一个转换集 (transition: color 0.6s ease-in 0s;)，因此您可以像这样调整它：transition: color, box-shadow 0.6s ease-in 0s;。

---

这里有一个简单的例子来展示两种不同的方法：http://codepen.io/tomhazledine/pen/KzWLzY

box-shadow 选项需要更少的代码。