html页面下的阴影,**css+html+javascript 大家帮我看下为什么悬停时菜单下的阴影条不显示？？*...

就是悬停在商品目录时，其下方应显示一个菜单下白色的阴影(类名为：.navHighlight)。我找了半天也没发现代码错误。非常崩溃！请帮个忙吧！

见下图：

代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

测试页面

* {

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;

}

商品目录

• 女装

  针织衫

  T恤

  毛衣

  衬衫

  半身裙

  长裙

  短裙

  风衣

  卫衣

  短外套

  夹克

  裤子

  西装

  大码女装

  妈妈装

  旗袍

  唐装

  休闲裤

  阔脚裤

  牛仔裤

  短裤

  打底衫

  打底裤

  吊带

  内衣

  皮衣

  皮草

  礼服

  舞台装

  套装

• 男装

  C

• 男鞋

  D

window.οnlοad=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

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[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);

}

}