Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
菜单下拉菜单-我有一个MooTools示例,但如何使其成为纯CSS?_Css_Mootools_Drop Down Menu_Css Transitions - Fatal编程技术网

菜单下拉菜单-我有一个MooTools示例,但如何使其成为纯CSS?

菜单下拉菜单-我有一个MooTools示例,但如何使其成为纯CSS?,css,mootools,drop-down-menu,css-transitions,Css,Mootools,Drop Down Menu,Css Transitions,我喜欢这个网站的主菜单是如何下降的。有很多下拉插件,等等,但是这个特殊的实现让我感觉非常顺利 问题是它是由Mootools和MenuMatic提供动力的(http://greengeckodesign.com/menumatic),但是我几乎可以肯定你可以用纯CSS达到同样的效果 我认为“淡入淡出”很容易通过CSS不透明度转换来完成,但我不知道如何1)允许下拉列表在宽度上动态变化,2)“滚动到视图”而不破坏周围的标记。在过去的项目中,我用“left:-9999em”来解决这个问题,从-9999e

我喜欢这个网站的主菜单是如何下降的。有很多下拉插件,等等,但是这个特殊的实现让我感觉非常顺利

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

我认为“淡入淡出”很容易通过CSS不透明度转换来完成,但我不知道如何1)允许下拉列表在宽度上动态变化,2)“滚动到视图”而不破坏周围的标记。在过去的项目中,我用“left:-9999em”来解决这个问题,从-9999em到目标位置的动画发生得如此之快,没有人知道有什么不同。。。但这似乎是一个黑客

有什么想法吗?

有可能

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;}

当然,您需要调整它并添加供应商前缀