html - 过渡效果不适用于正确的元素

Question

我正在制作一个类似隐藏菜单的 Accordion ，我想让子菜单具有特定的功能。我看到了 FelixWastal 的 Codepen http://codepen.io/felixw/pen/Hqmbu我认为为隐藏的子菜单添加一些创意。但是在我编码之后，示例中看到的功能由于某种原因影响了主要的 ul。

这是我目前在这个问题上的尝试:http://codepen.io/PorototypeX/pen/swvtc

Answer 1

好吧，我猜你正在尝试制作一个子菜单，并以不同的方式设计它。

这是 FIDDLE

HTML

<nav>
  <a href="#"><span>Home</span></a>
  <a href="#"><span>Shop</span></a>
  <a href="#"><span>Submenu</span></a>
  <a href="#"><span>Blog</span></a>
  <a href="#"><span>Contact</span></a>
</nav>

相关的 CSS

nav a:nth-child(3):before {
  content: "";
  position: absolute; 
  background: blue;
  height: 100%;
  width: 0px;
  top: 0;
  left: 0;
  transition: all 0.3s ease 0s; 
  z-index: -1;
}
nav a:hover:nth-child(3):before { width: 100%;}
nav a:hover:nth-child(3) span { color: white;}

注意:如果 FelixWastal 在那里......恭喜你完成了一件漂亮的作品 - 视觉上和编程上。