HTML
1 2 3 4 5下拉菜单 6 7 8 9 10 11 41 42
CSS实现三级菜单
1 /*静态页面样式*/ 2 * { 3 margin:0; 4 padding:0; 5 } 6 7 #nav { 8 width: 500px; 9 height: 50px;10 margin: 50px auto;11 background-color: #ccc;12 border-radius: 10px;13 }14 15 ul li {16 list-style: none;17 }18 19 #nav>ul>li {20 float: left;21 }22 23 ul a {24 text-decoration: none;25 color: black;26 display: block;27 text-align: center;28 height: 50px;29 line-height: 50px;30 width: 125px;31 background-color: #ccc;32 border-radius: 10px;33 }34 35 36 ul a:hover {37 color: white;38 background-color: black;39 border-radius: 10px;40 }41 42 ul ul {43 position: absolute;44 display: none;45 }46 47 ul ul ul {48 position: absolute;49 margin-left: 125px;50 margin-top: -50px;51 display: none;52 }53 54 55 /*CSS显示下拉菜单*/56 ul li:hover>ul {57 display: block;58 }
JS实现三级菜单
1 window.onload = showMenu; 2 3 function showMenu() { 4 var nav = document.getElementById("nav"); 5 var list = nav. getElementsByTagName("li"); 6 7 for (var i = 0, l = list.length; i < l; i++) { 8 list[i].onmouseover = function() { 9 var sub_menu = this.getElementsByTagName("ul")[0];10 if(sub_menu) {11 sub_menu.style.display = "block";12 }13 }14 list[i].onmouseout = function() {15 var sub_menu = this.getElementsByTagName("ul")[0];16 if(sub_menu) {17 sub_menu.style.display = "none";18 }19 }20 }21 }
jQuery实现三级菜单
1 $(document).ready(function() {2 $("#nav").find("li").mouseover(function() {3 $(this).children("ul").show();4 });5 $("#nav").find("li").mouseout(function() {6 $(this).children("ul").hide();7 });8 }) show()和hide()不能传入参数，传入参数就有bug，原因未知。。。
而且也不支持slide和fade。。。
JS实现动画菜单
1 window.onload = showMenu; 2 3 function showMenu() { 4 var nav = document.getElementById("nav"); 5 var list = nav.getElementsByTagName("li"); 6 7 for (var i = 0, l = list.length; i < l; i++) { 8 list[i].onmouseover = function() { 9 var sub_menu = this.getElementsByTagName("ul")[0];10 if(sub_menu) {11 sub_menu.style.display = "block";12 var addH = function() {13 var h = sub_menu.offsetHeight;14 h += 5;15 if(h >= 100) {16 sub_menu.style.height = 100 + "px";17 } else {18 sub_menu.style.height = h + "px";19 }20 };21 setInterval(addH, 50);22 }23 }24 25 list[i].onmouseout = function() {26 var sub_menu = this.getElementsByTagName("ul")[0];27 if(sub_menu) {28 var subH = function() {29 var h = sub_menu.offsetHeight;30 h -= 5;31 if(h <= 0) {32 sub_menu.style.height = 0 + "px";33 sub_menu.style.display = "none";34 } else {35 sub_menu.style.height = h + "px";36 }37 };38 setInterval(subH, 50);39 }40 }41 }42 } 可以正常显示菜单，但是无法隐藏菜单。。。
只能显示二级菜单，三级菜单被吃了？！
随着鼠标不停地滑过，显示菜单的速度越来越快。。。
CSS实现动画菜单
1 /*静态页面样式*/ 2 * { 3 margin:0; 4 padding:0; 5 } 6 7 #nav { 8 width: 500px; 9 height: 50px;10 margin: 50px auto;11 background-color: #ccc;12 border-radius: 10px;13 box-shadow: 2px 2px 2px rgba(0,0,0,0.8);14 }15 16 #nav>ul>li>a {17 border-radius: 10px;18 }19 20 #nav ul li {21 list-style: none;22 }23 24 #nav>ul>li {25 float: left;26 }27 28 #nav a {29 text-decoration: none;30 color: black;31 display: block;32 height: 50px;33 width: 125px;34 text-align: center;35 line-height: 50px;36 background-color: #ccc;37 }38 39 #nav ul ul {40 position: absolute;41 /*display: none;*/42 opacity: 0;43 margin: 20px 0 0 0;44 transition: all 1s ease-in-out;45 }46 47 #nav ul ul ul {48 margin-top: -30px;49 margin-left: 160px;50 }51 52 #nav ul ul a {53 border-radius: 10px 10px 0 0;54 border-bottom: 1px solid white;55 }56 57 #nav a:hover {58 color: white;59 background-color: black;60 }61 62 #nav>ul>li:hover>ul {63 /*display: block;*/64 opacity: 1;65 margin: -15px 0 0 0;66 }67 68 #nav>ul ul>li:hover>ul {69 /*display: block;*/70 opacity: 1;71 margin-left: 140px;72 margin-top: -50px;73 } 74 75 /*CSS画三角形*/76 #nav>ul>li>ul>li:first-child:before {77 content: "";78 display: block;79 border-top: 15px solid transparent;80 border-right: 15px solid transparent;81 border-bottom: 15px solid #ccc;82 border-left: 15px solid transparent;83 width: 0;84 margin-left: 50px;85 }86 87 #nav ul ul ul>li:first-child:before {88 content: "";89 position: absolute;90 display: block;91 border-top: 15px solid transparent;92 border-right: 15px solid #ccc;93 border-bottom: 15px solid transparent;94 border-left: 15px solid transparent;95 width: 0;96 margin-left: -30px;97 margin-top: 13px;98 } 预先定义的二级菜单和三级菜单的display属性不能设置为none，如果先设置为none然后在鼠标滑过的时候改为block，将完全没有动画效果，原因未知。。。
但是如果display不设置为none，在鼠标滑过菜单（隐形）所在的位置时，也会显示出来，纠结。。。