| 本文实例为大家分享了js+css实现三级导航菜单的具体代码，供大家参考，具体内容如下 导航菜单hover事件用css实现相对容易，只需要将透明度更改即可，如果想要菜单有一个渐变的效果，然而可惜的是transition并不支持display，所以用opacity实现效果完全相同。 下面是用css实现的完整代码： <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>三级导航菜单</title> </head> <style> *{ 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;} </style> <body> <div class="nav main"> <ul id="nav"> <li id="nav_one"><a href="#" >一级</a> <ul id="frist"> <li id="nav_two" class="nav_two"> <a href="#" >二级</a> <ul id="second"> <li><a href="#" >三级</a></li> <li><a href="#" >三级</a></li> <li><a href="#" >三级</a></li> </ul> </li> <li class="nav_two"><a href="#" >二级</a></li> <li class="nav_two"><a href="#" >二级</a></li> </ul> </li> <li><a href="#" >一级</a></li> <li><a href="#" >一级</a></li> <li><a href="#" >一级</a></li> <li><a href="#" >一级</a></li> </ul> </div> </body></html>js实现的相对麻烦一点，但也可以，代替了css中hover效果。 <!--<script> window.onload = function(){ var one = document.getElementById("nav_one"); var frist = document.getElementById("frist"); var second = document.getElementById("second"); one.onmouseover = function(){ frist.style.opacity = "1"; frist.style.transition = "all 2s"; frist.style.WebkitTransition = "all 2s"; } one.onmouseout = function(){ frist.style.opacity = "0"; frist.style.transition = "all 0.5s"; frist.style.WebkitTransition = "all 0.5s"; } var two = document.getElementById("nav_two"); two.onmouseover = function(){ second.style.opacity = "1"; second.style.transition = "all 2s"; second.style.WebkitTransition = "all 2s"; } two.onmouseout = function(){ second.style.opacity = "0"; second.style.transition = "all 0.5s"; second.style.WebkitTransition = "all 0.5s"; } }</script>-->以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
如何基于JS实现Ajax并发请求的控制详解
javascript实现自定义滚动条效果 |
