GoHr
2015-08-08 16:00
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <style type="text/css"> body{ padding:0; margin:0} .bigmenu{ border:#c81623 solid 2px; width:220px; display:block; margin:0; padding:0; text-height:30px;} .toptitle{ background-color:#b1191a; text-align:left; text-indent:10px; height:48px; line-height:40px; color:#fff;} .bigmenu li a{ color:#000; text-decoration:none;} .bigmenu li{ text-indent:10px; height:20px; background-image:url(5411027300014f0200220030.jpg.png); background-repeat:no-repeat; background-position:right; text-height:0px; font-size:14px; display:block; padding-top:8px; padding-bottom:4px; z-index:3;} .hidmenu{ display:none; position:absolute; z-index:4; width:715px; left:220px; top:49px; background-color:#FFF; border:1px solid #ddd; border-right:0; box-shadow:0 0} .bigmenu li:hover .hidmenu{ display:block;} .bigmenu li:hover a{ text-decoration:underline; font-weight:bold; color:#F00} .bigmenu li:hover{ border:1px solid #ddd; border-right:0; box-shadow:0 0} .right{ float:left; width:490px; margin:5px;} .left{ float:left; width:200px; margin:5px;} </style> <script type="text/javascript"> window.onload = function () { // 编写JS代码 var lis=document.getElementsByTagName("li") for(i=0;i<lis.length;i++) { lis[i].onmouseover=function() { this.className="lihover" } } for(i=0;i<lis.length;i++) { lis[i].onmouseout=function() { this.className="" } } } </script> <body> <ul class="bigmenu"> <div class="toptitle">全部商品分类</div> <li><a href="#">图书、音像、数字商品</a> <div class="hidmenu"> <div class="right"><br/>信息<br/>信息<br/>信息<br/>信息<br/>信息<br/></div> <div class="left"><br/>信息<br/>信息<br/>信息<br/>信息<br/>信息<br/></div> </div> </li> <li><a href="#">家用电器</a></li> <li><a href="#">手机、数码</a></li> <li><a href="#">电脑、办公</a></li> <li><a href="#">家居、家具、家装、厨具</a></li> <li><a href="#">服饰内衣、珠宝首饰</a></li> <li><a href="#">个护化妆</a></li> <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li> <li><a href="#">运动户外</a></li> <li><a href="#">汽车用品</a></li> <li><a href="#">母婴、玩具乐器</a></li> <li><a href="#">食品饮料、酒类、生鲜</a></li> <li><a href="#">营养保健</a></li> </ul> </body> </html>
.bigmenu li:hover .hidmenu{ display:block;} .bigmenu li:hover a{ text-decoration:underline; font-weight:bold; color:#F00} .bigmenu li:hover{ border:1px solid #ddd; border-right:0; box-shadow:0 0}
将19、20、21这三行的li:hover替换成.lihover
.bigmenu .lihover .hidmenu{ display:block;} .bigmenu .lihover a{ text-decoration:underline; font-weight:bold; color:#F00} .bigmenu .lihover{ border:1px solid #ddd; border-right:0; box-shadow:0 0}
JavaScript语言去掉 lihover换成li:hover就可以实现 哪里错了呢
商城分类导航效果
63738 学习 · 276 问题
相似问题