js+css实现三级导航菜单 js+css实现三级导航菜单

本文实例为大家分享了js+css实现三级导航菜单的具体代码，供大家参考，具体内容如下
导航菜单hover事件用css实现相对容易，只需要将透明度更改即可，如果想要菜单有一个渐变的效果，然而可惜的是transition并不支持display，所以用opacity实现效果完全相同。
下面是用css实现的完整代码：

三级导航菜单 - 锐客网 *{ margin: 0; padding: 0; }body{ font-size: 16px; background-color:#EDEDED ; font-style: inherit; color:#757576 ; }.main{ width: 1050px; margin: 0 auto; }.fl{ float: left; }.fr{ float: right; }a{ text-decoration: none; outline: none; color:#757576 ; }ul,ol{ list-style: none; }.clear{ clear: both; }.clearfix{ *zoom:1; }li{ float: left; display: inline-block; width: 120px; height: 40px; text-align: center; line-height: 40px; }li a:hover{ color: red; }#frist { opacity: 0; }#frist li{ float: none; position: relative; } li a:hover{ color: red; transition: all 0.5s; }:hover{ transition: all 2s; }#second { opacity: 0; margin: -40px 0 0 80px; padding: 0px; position: absolute; }#nav_one:hover #frist{ opacity:1; transition: all 2s; }#nav_two:hover #second{ opacity:1; transition: all 2s; }
一级
二级
三级
三级
三级
二级
二级

一级
一级
一级
一级