Question

我是这里的新手并使用此资源作为搜索功能，但今天我很难过，想要寻求建议和选择。

这是我的网站。

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

以管理这个词开头的第二个菜单，我想将鼠标悬停在1px虚线上，以模仿CBS网站鼠标左上角的动作，显示在这里

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

如果您鼠标悬停在左上角 NCAABB ＆gt;＆gt; 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标签或类标签菜单栏的东西......

谢谢！枝

Answer 1

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

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

ul.quicknav > li > a

您的代码已经设置了转换集（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;。

以下是一个快速示例，展示了两种不同的方法：http://codepen.io/tomhazledine/pen/KzWLzY

transition: color, box-shadow 0.6s ease-in 0s;选项需要更少的代码。

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

1 个答案: