Question

我正在制作类似隐藏菜单的手风琴，我想让子菜单具有特定的功能。我看到了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在那里......祝贺一件美丽的作品 - 视觉和程序化。

转换效果不适用于正确的元素

1 个答案: