菜单下拉菜单-我有一个MooTools的例子，但我如何才能使它成为纯粹的CSS

Question

我喜欢这个网站的主菜单是如何下拉的。有很多下拉插件等，但这个特定的实现对我来说真的很顺利。

问题是它是由Mootools和MenuMatic提供动力的(http://greengeckodesign.com/menumatic)，但我几乎可以肯定，使用纯CSS也可以达到同样的效果。

我认为使用CSS不透明度转换可以很容易地完成"淡入淡出"，但我不确定如何1）允许动态宽度的下拉菜单，以及2）在不破坏周围标记的情况下"滚动到视图中"。在过去的项目中，我用"左：-9999em"绕过了这一点，从-9999em到目标位置的动画发生得如此之快，没有人知道有什么不同。。。但这似乎是个黑客。

有什么想法吗？

Answer 1

这是可能的。

p {
  height:0; overflow:hidden;
  transition: all 2s;
  opacity: 0; background: salmon;
  width: 25%;
}
a:hover + p{
  height:100px; 
  overflow:auto;
  opacity: 1;
  transition: all 2s;}

演示

当然，您需要对其进行调整并添加供应商前缀。