标签：
1.CSS实现
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{margin:0;padding:0;font-size:12px;} 8 body{behavior:url(csshover.htc);} 9 .nav{background-color:#eee;width:600px;height:40px;margin:0 auto;} 10 ul{list-style:none;} 11 ul li{float:left;line-height:40px;text-align:center;position:relative;} 12 a{text-decoration:none;color:#000;padding:0 30px;height:40px;} 13 a:hover{color:#fff;background-color:#ccc;display:block;} 14 ul li ul li{float:none;background-color:#eee;margin-top:2px;} 15 ul li ul{position:absolute;left:0px;top:40px;display:none;} 16 ul li ul a:hover{background-color:blue;} 17 ul li:hover ul{display:block;} 18 </style> 19 </head> 20 <body> 21 <div class="nav"> 22 <ul> 23 <li><a href="">这是首页</a> 24 <ul> 25 <li><a href="">PHP</a></li> 26 <li><a href="">Javascript</a></li> 27 <li><a href="">jQuery</a></li> 28 </ul> 29 </li> 30 <li><a href="">课程大厅</a></li> 31 <li><a href="">学习中心</a> 32 <ul> 33 <li><a href="">PHP</a></li> 34 <li><a href="">Javascript</a></li> 35 <li><a href="">jQuery</a></li> 36 </ul> 37 </li> 38 <li><a href="">经典案例</a></li> 39 <li><a href="">关于我们</a></li> 40 </ul> 41 </div> 42 </body> 43 </html>
特点：代码简洁明了。如需实际运用，建议把css文件单独分离，下面来加强一下ie的兼容性
复制以下代码，改名为 csshover.htc 放入文件目录
1 <attach event="ondocumentready" handler="parseStylesheets"/> 2 <script language="JScript"> 3 var currentSheet, doc = window.document, activators = { 4 onhover:{on:‘onmouseover‘, off:‘onmouseout‘}, 5 onactive:{on:‘onmousedown‘, off:‘onmouseup‘} 6 }; 7 function parseStylesheets(){ 8 var sheets = doc.styleSheets, l = sheets.length; 9 for(var i = 0; i < l; i++){ 10 parseStylesheet(sheets[i]); 11 }; 12 }; 13 function parseStylesheet(sheet){ 14 if(sheet.imports){ 15 try{ 16 var imports = sheet.imports, l = imports.length; 17 for(var i = 0; i < l; i++){ 18 parseStylesheet(sheet.imports[i]); 19 }; 20 }catch(securityException){}; 21 }; 22 try{ 23 var rules = (currentSheet = sheet).rules, l = rules.length; 24 for(var j = 0; j < l; j++){ 25 parseCSSRule(rules[j]); 26 }; 27 }catch(securityException){}; 28 }; 29 function parseCSSRule(rule){ 30 var select = rule.selectorText, style = rule.style.cssText; 31 if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return; 32 var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, ‘on$1‘); 33 var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, ‘.$2‘ + pseudo); 34 var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1]; 35 var affected = select.replace(/:hover.*$/, ‘‘); 36 var elements = getElementsBySelect(affected); 37 currentSheet.addRule(newSelect, style); 38 for(var i = 0; i < elements.length; i++){ 39 new HoverElement(elements[i], className, activators[pseudo]); 40 }; 41 }; 42 function HoverElement(node, className, events){ 43 if(!node.hovers) node.hovers = {}; 44 if(node.hovers[className]) return; 45 node.hovers[className] = true; 46 node.attachEvent(events.on, function(){ 47 node.className += ‘ ‘ + className; 48 }); 49 node.attachEvent(events.off, function(){ 50 node.className = node.className.replace(new RegExp(‘\\s+‘+className, ‘g‘),‘‘); 51 }); 52 }; 53 function getElementsBySelect(rule){ 54 var parts, nodes = [doc]; 55 parts = rule.split(‘ ‘); 56 for(var i = 0; i < parts.length; i++){ 57 nodes = getSelectedNodes(parts[i], nodes); 58 }; 59 return nodes; 60 }; 61 function getSelectedNodes(select, elements){ 62 var result, node, nodes = []; 63 var classname = (/\.([a-z0-9_-]+)/i).exec(select); 64 var identify = (/\#([a-z0-9_-]+)/i).exec(select); 65 var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, ‘‘); 66 for(var i = 0; i < elements.length; i++){ 67 result = tagName ? elements[i].all.tags(tagName) : elements[i].all; 68 for(var j = 0; j < result.length; j++){ 69 node = result[j]; 70 if((identify && node.id != identify[1]) || (classname && !(new RegExp(‘\\b‘ + classname[1] + ‘\\b‘).exec(node.className)))) continue; 71 nodes[nodes.length] = node; 72 }; 73 }; 74 return nodes; 75 }; 76 </script>
具体实现原理自行百度。
2.Jquery实现
使用的jQuery版本为1.7.2.min.js,可以去各大CDN平台找到。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{margin:0;padding:0;font-size:12px;}/*加强兼容，去除内边间距兼容*/ 8 .nav{background-color:#eee;width:600px;height:40px;margin:0 auto;}/*div class="nav"背景上色，制定宽高并居中*/ 9 ul{list-style:none;}/*去除小圆点*/ 10 ul li{float:left;line-height:40px;text-align:center;position:relative;width:108px;} 11 a{text-decoration:none;color:#000;padding:0 30px;height:40px;} 12 a:hover{color:#fff;background-color:#ccc;display:block;} 13 ul li ul li{float:none;background-color:#eee;margin-top:2px;} 14 ul li ul{position:absolute;left:0px;top:40px;display:none;} 15 ul li ul a:hover{background-color:blue;} 16 ul li ul li ul{position:absolute;left:108px;top:0px;display:none;} 17 /* ul li:hover ul{display:block;}*/ 18 </style> 19 <script type="text/javascript" src="jquery.min.js"></script> 20 <script type="text/javascript"> 21 $(document).ready(function(){ 22 $(".navmenu").mouseover(function(){ 23 $(this).children("ul").show(); 24 }); 25 $(".navmenu").mouseout(function(){ 26 $(this).children("ul").hide(); 27 }); 28 }); 29 30 </script> 31 </head> 32 <body> 33 <div class="nav"> 34 <ul> 35 <li class="navmenu"><a href="">这是首页</a> 36 <ul> 37 <li><a href="">PHP</a></li> 38 <li><a href="">Javascript</a></li> 39 <li class="navmenu"><a href="">jQuery</a> 40 <ul> 41 <li><a href="">PHP</a></li> 42 <li><a href="">Javascript</a></li> 43 <li><a href="">jQuery</a></li> 44 </ul> 45 </li> 46 </ul> 47 </li> 48 <li><a href="">课程大厅</a></li> 49 <li class="navmenu"><a href="">学习中心</a> 50 <ul> 51 <li><a href="">PHP</a></li> 52 <li><a href="">Javascript</a></li> 53 <li><a href="">jQuery</a></li> 54 </ul> 55 </li> 56 <li><a href="">经典案例</a></li> 57 <li><a href="">关于我们</a></li> 58 </ul> 59 </div> 60 </body> 61 </html>
3.js实现
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{margin:0;padding:0;font-size:12px;} 8 .nav{background-color:#eee;width:600px;height:40px;margin:0 auto;} 9 ul{list-style:none;} 10 ul li{float:left;line-height:40px;text-align:center;position:relative;} 11 a{text-decoration:none;color:#000;padding:0 30px;height:40px;} 12 a:hover{color:#fff;background-color:#ccc;display:block;} 13 ul li ul li{float:none;background-color:#eee;margin-top:2px;} 14 ul li ul{position:absolute;left:0px;top:40px;display:none;} 15 /*ul li ul a:hover{background-color:blue;}*/ 16 /*ul li:hover ul{display:block;}*/ 17 </style> 18 <script type="text/javascript"> 19 function showsubmenu(li){ 20 var submenu=li.getElementsByTagName("ul")[0]; 21 submenu.style.display="block"; 22 } 23 function hidesubmenu(li){ 24 var submenu=li.getElementsByTagName("ul")[0]; 25 submenu.style.display="none"; 26 } 27 </script> 28 </head> 29 <body> 30 <div class="nav"> 31 <ul> 32 <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="">这是首页</a> 33 <ul> 34 <li><a href="">PHP</a></li> 35 <li><a href="">Javascript</a></li> 36 <li><a href="">jQuery</a></li> 37 </ul> 38 </li> 39 <li><a href="">课程大厅</a></li> 40 <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="">学习中心</a> 41 <ul> 42 <li><a href="">PHP</a></li> 43 <li><a href="">Javascript</a></li> 44 <li><a href="">jQuery</a></li> 45 </ul> 46 </li> 47 <li><a href="">经典案例</a></li> 48 <li><a href="">关于我们</a></li> 49 </ul> 50 </div> 51 </body> 52 </html>
特点：直接对属性值操作，代码比较简练。
如有纰漏，希望指出
标签：
原文地址：http://www.cnblogs.com/xiaohei1942/p/4437575.html
