个效果就折腾了俺一个小时的时间,源码是挺简单的,但比较多,效果见本站顶部有二级菜单的分类导航。
但最要命的是IE10以下不支持CSS的transition效果,东搞西搞只好用一个简单的语句判断IE加载独立的CSS了。
下面是导航下拉菜单翻转效果DIV+CSS的源码


上面的源码经过压缩,可以到站长工具格式化一下,仔细看的话就知道CSS效果是从.submenu这个子菜单类开始的。

如何兼容IE

上面的效果在IE10以下是不兼容的,所以得在以内加上IE下单独使用的CSS样式标签,这个标签是这样表示的。

  1. <!--[if IE]>
  2. <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/style_ie.css" />
  3. <![endif]-->

其中的style_ie.css就是IE下的样式。只能这么办了,目前还没有其他办法。
最后顺便吐个槽:360se简直是浏览器中的垃圾,不解释。
css下拉菜单