                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /商城分類導航效果

幫忙看下哪里錯了？

<!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="#">圖書、音像、數(shù)字商品</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="#">手機、數(shù)碼</a></li>
????????<li><a?href="#">電腦、辦公</a></li>
????????<li><a?href="#">家居、家具、家裝、廚具</a></li>
????????<li><a?href="#">服飾內(nèi)衣、珠寶首飾</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="#">營養(yǎng)保健</a></li>
</ul>
</body>
</html>

GoHr

2015-08-08

源自：商城分類導航效果 3-2

關注問題我要回答

822

操作

收起

2 回答

學之舟_36820
2015-09-02

.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}