极客观点
项目管理
HarmonyOS
就是悬停在商品目录时，其下方应显示一个菜单下白色的阴影（类名为：.navHighlight）。我找了半天也没发现代码错误。非常崩溃！请帮个忙吧！
见下图：
代码如下：
<!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 charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
cursor: pointer;
}
a {
font-family: Microsoft YaHei, Simsun;
}
.sa {
float: left;
margin-top: 40px;
margin-left: 40px;
position: relative;
z-index: 9999;
width: 200px;
height: 500px;
}
.sbtn {
position: relative;
z-index: 10000;
}
.tnavContainer {
display: block;
border:0px solid;
background-color: red;
width:500px;
position:relative;
z-index:10001;
height: 46px;
}
.tnav {
float:right;
width:200px;
position:relative;
z-index:10002;
text-align:center;
border:0px solid;
}
.navHighlight {
border:0px solid;
position: absolute;
z-index:10003;
width:180px
height:3px;
top:20px;
right:0px;
background-color:#222;
}
.sa .sbtn h2 {
font-size: 14px;
}
.sa .sbtn h2 a {
line-height: 36px;
background-color: ;
padding-left: 10px;
width: 180px;
padding-right: 10px;
text-decoration: none;
height: 36px;
color: #444;
weight: normal;
display: block;
}
.sa .sbtn h2 a:hover {
background-color: ;
}
.sa .sbtn ul {
position: absolute;
z-index: 10000;
width: 200px;
height: 500px;
top: 36px;
left: 0px;
list-style: none;
display: none;
padding-top: 10px;
background-color: #60a411;
}
.sa .sbtn ul li {
padding-bottom: ;
zoom: 1;
clear: both;
}
.sa .sbtn ul li a {
padding-left: 18px;
font-size: 12px;
margin-top: ;
line-height: 30px;
text-decoration: none;
color: #fff;
white-space: nowrap;
}
.sa .sbtn ul li .popmenu {
width: 800px;
height: 500px;
padding-left: 32px;
padding-right: 30px;
background-color: #f5f5f5;
margin-top: 10px;
display: none;
position: absolute;
}
.sa .sbtn ul li.active{
background:#f2f2f2;
}
.sa .sbtn ul li .popmenu dl {
clear: both;
overflow: auto;
color: #666;
padding-top: 15px;
padding-bottom: 15px;
height: 500px;
}
.sa .sbtn ul li .popmenu dl a {
border: 0px solid;
float: left;
line-height: 42px;
color: #666;
margin-left: 0px;
margin-right: 0px;
}
.sa .sbtn ul li .popmenu dt {
float: left;
width: 70px;
}
.sa .sbtn ul li .popmenu dd {
float: left;
border: 0px solid;
width: 680px;
margin-left: 0px;
}
.sa .sbtn:hover ul {
display: block;
}
.sa .sbtn ul li:hover {
background-color: #f5f5f5;
}
.sa .sbtn ul li.acitive{
background:#f2f2f2;
}
.sa .sbtn ul li:hover a,.sa .sbtn ul li.active a {
color: #666;
}
.right-menu {
display: none;
width: 800px;
height: 500px;
padding-left: 32px;
padding-right: 30px;
background-color: #f5f5f5;
margin-top: 10px;
position: absolute;
top: 0px;
left: 200px;
}
.s1>div{
position: absolute;
left: 200px;
width: 500px;
}
.show{
display:block;
}
</style>
</head>
<body>
<div class="sa">
<div class="sbtn">
<div class="tnavContainer">
<div class="tnav">
<h2><a href="#">商品目录</a></h2>
</div>
<p class="navHighlight">
</p>
</div>
<ul>
<li class="s1 active"><a href="#">女装</a>
<div class="right-menu show">
<dl>
<dd>
<a href="#">针织衫</a>
<a href="#">T恤</a>
<a href="#">毛衣</a>
<a href="#">衬衫</a>
<a href="#">半身裙</a>
<a href="#">长裙</a>
<a href="#">短裙</a>
<a href="#">风衣</a>
<a href="#">卫衣</a>
<a href="#">短外套</a>
<a href="#">夹克</a>
<a href="#">裤子</a>
<a href="#">西装</a>
<a href="#">大码女装</a>
<a href="#">妈妈装</a>
<a href="#">旗袍</a>
<a href="#">唐装</a>
<a href="#">休闲裤</a>
<a href="#">阔脚裤</a>
<a href="#">牛仔裤</a>
<a href="#">短裤</a>
<a href="#">打底衫</a>
<a href="#">打底裤</a>
<a href="#">吊带</a>
<a href="#">内衣</a>
<a href="#">皮衣</a>
<a href="#">皮草</a>
<a href="#">礼服</a>
<a href="#">舞台装</a>
<a href="#">套装</a>
</dd>
</dl>
</div>
</li>
<li class="s1">
<a href="#">男装</a>
<div class="right-menu">
<dl>
<dd>
C
</dd>
</dl>
</div>
</li>
<li class="s1"><a href="#">男鞋</a>
<div class="right-menu">
<dl>
<dd>
D
</dd>
</dl>
</div>
</li>
</ul>
</div>
</div>
</body>
<script>
window.onload=function(){
var c1 = checkM('.sbtn>ul','.s1>div');
};
var checkMenu= function(box,menu,ev){
this.box = document.querySelector(box);
this.menu = document.querySelectorAll(menu);
this.lis = this.box.children;
this.init();
}
var checkM = function(box,menu){
return new checkMenu(box,menu);
}
checkMenu.prototype={
init:function(){
var me =this,
menu = me.menu,
lis = me.lis,
box = me.box;
box.addEventListener('mouseover',function(e){
e = e||window.event;
var src = e.srcElement||e.target;
if(src!=box){
me.idx = me.getIndex(src,box);
for(var i=0;i<menu.length;i++){
i==me.idx&&(
me.removeCls(menu,'show'),me.addCls(menu[i],'show'),
me.removeCls(lis,'active'),me.addCls(lis[i],'active')
);
}
}
});
box.addEventListener('mouseleave',function(e){
me.removeCls(menu,'show');
me.addCls(menu[0],'show');
me.removeCls(lis,'active');
me.addCls(lis[0],'active');
});
},
addCls:function(el,cls){
el.className = el.className.replace(/\s+$/,'')
el.className += el.className?' '+cls:cls;
},
removeCls:function(el,cls){
if(el.length>0){
for(var i=0;i<el.length;i++){
el[i].className = el[i].className.indexOf(cls)==-1?el[i].className:el
[i].className.replace(new RegExp('\\s?'+cls),'');
}
}
},
getIndex:function(src,lis){
return [].slice.call(lis.children).indexOf(src);
}
}
</script>
</html>
width:180px;后面少了个分号