形形色色的下拉菜单 （菜单中文变英文+多级菜单）
来源：慕课网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .top-nav { margin-top:50px; font-size: 12px; font-weight: bold; list-style: none; border-bottom: 8px solid #DC4E1B; overflow: auto; } .top-nav li { float: left; margin-right: 1px; } .top-nav li a { /*margin-top: 20px;*/ /*默认margin-top是0*/ /*响应margin-top：-20后，超出了浏览器的可视区域*/ line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; } /*设置正常状态英文菜单隐藏*/ .top-nav li a span{ display:none; } /*鼠标移动到链接上面时将英文菜单显示*/ .top-nav li a:hover span{ display:block; background:#DC4E1B; color:white; } .top-nav li a:hover{ margin-top:-20px; } /*鼠标移动到链接上面时将中文菜单位置上移*/ </style> </head> <body> <ul class="top-nav"> <li><a href="#">首页<span>Home</span></a></li> <li><a href="#">课程大厅<span>Course</span></a></li> <li><a href="#">学习中心<span>Learn</span></a></li> <li><a href="#">关于我们<span>About</span></a></li> </ul> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .top-nav { font-size: 12px; font-weight: bold; list-style: none; } .top-nav li { float: left; list-style: none; margin-right: 1px; } .top-nav li a { line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; } .top-nav li a:hover { background: #900; color: #FFF; } .top-nav ul { list-style: none; display: none; width: 80px; padding: 0; position: relative; } .top-nav li ul li ul { position: absolute; top: 0; left: 80px; } /* 使用CSS设置鼠标移动到一级菜单时，二级菜单显示，三级菜单隐藏 */ .top-nav li:hover ul { display: block; } .top-nav li:hover ul li ul { display: none; } /* 使用CSS设置鼠标移动到二级菜单时，三级菜单显示 */ .top-nav li ul li:hover ul { display: block; } </style> <script type="text/javascript"> window.onload = function() { //判断是否为IE浏览器 var isIF = !!window.ActiveXObject; var isIE6 = isIE && !window.XMLHttpRequest; if (isIE6) { var Lis = document.getElementsByTagName("li"); for (var i = 0; i < Lis.length; i++) { Lis[i].onmouseover = function() { var u = this.getElementsByTagName("ul")[0]; //如果包含子菜单，就将子菜单显示 if (u != undefined) { u.style.display = "block"; } } Lis[i].onmouseout = function() { var u = this.getElementsByTagName("ul")[0]; //如果包含子菜单，就将子菜单隐藏 if (u != undefined) { u.style.display = "none"; } } } } } </script> </head> <body> <ul class="top-nav"> <li><a href="#">慕课网首页</a> <ul> <li><a href="#">前端课程 +</a> <ul> <li><a href="#">javascript</a></li> <li><a href="#">css</a></li> <li><a href="#">jquery</a></li> </ul> </li> <li><a href="#">手机开发</a> <ul> <li><a href="#">ios开发</a></li> <li><a href="#">android开发</a></li> <li><a href="#">WP开发</a></li> </ul> </li> <li><a href="#">后台编程</a></li> </ul> </li> <li><a href="#">课程大厅</a> </li> <li><a href="#">学习中心</a> <ul> <li><a href="#">前端课程 </a> <ul> <li><a href="#">javascript</a></li> <li><a href="#">css</a></li> <li><a href="#">jquery</a></li> </ul> </li> <li><a href="#">手机开发</a> <ul> <li><a href="#">ios开发</a></li> <li><a href="#">android开发</a></li> <li><a href="#">WP开发</a></li> </ul> </li> <li><a href="#">后台编程</a></li> </ul> </li> <li><a href="#">关于我们</a></li> </ul> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .top-nav { font-size: 14px; font-weight: bold; list-style: none; } .top-nav li { float: left; margin-right: 1px; } .top-nav li a { line-height: 34px; text-decoration: none; background: #3f240e; color: #fff; display: block; width: 80px; text-align: center; } .top-nav ul { list-style: none; display: none; padding: 0; position: absolute; height: 0; overflow: hidden; } .top-nav li a:hover { background: url(http://img.mukewang.com/5461b50d0001e28000010034.jpg) 0 0 repeat-x; } .note { color: #3f240e; display: block; background: url(http://img.mukewang.com/5461b50d0001e28000010034.jpg) 0 0 repeat-x; } .corner { display: block; height: 11px; background: url(http://img.mukewang.com/5461b5620001410d00170011.jpg) 31px 0 no-repeat; } </style> <script type="text/javascript"> window.onload = function() { var Lis = document.getElementsByTagName("li"); for (var i = 0; i < Lis.length; i++) { //鼠标经过时的效果 Lis[i].onmouseover = function() { var u = this.getElementsByTagName("ul")[0]; if (u != undefined) { u.style.display = "block"; ChangeH(u.id, 1); } } Lis[i].onmouseleave = function() { var u = this.getElementsByTagName("ul")[0]; if (u != undefined) { ChangeH(u.id, -1); } } } } function ChangeH(id, count) { // 根据ID找到ulList，同时得到其高度 var ulList = document.getElementById(id); var h = ulList.offsetHeight; h += count; if (count > 0) { if (h <= 42) { // 将高度赋值给ulList，同时，不断调用本函数 ulList.style.height = h + "px"; setTimeout("ChangeH('" + id + "',1)", 10); } else { return; } } else { if (h > 0) { // 将高度赋值给ulList，同时，不断调用本函数 ulList.style.height = h + "px"; setTimeout("ChangeH('" + id + "',-1)", 10); } else { ulList.style.display = "none"; return; } } } </script> </head> <body> <ul class="top-nav"> <li><a href="#"><span class="note">慕课网</span></a> </li> <li><a href="#">课程大厅</a> </li> <li><a href="#">学习中心</a> <ul id="mnuUL"> <span class="corner"></span> <li><a href="#">前端课程 </a></li> <li><a href="#">手机开发</a> </li> <li><a href="#">后台编程</a></li> </ul> </li> <li><a href="#">关于我们</a></li> </ul> </body> </html>
