css，js导航问题
自己做的一个仿京东的导航，IE7下有点小BUG，当鼠标在父级菜单空白区域（就是图片中灰色的部分）滑动时，子菜单的框体显示不太稳定，会断断续续地出现闪烁。。。高手帮帮忙看看...
自己做的一个仿京东的导航，IE7下有点小BUG，当鼠标在父级菜单空白区域（就是图片中灰色的部分）滑动时，子菜单的框体显示不太稳定，会断断续续地出现闪烁。。。高手帮帮忙看看怎么回事啊。。谢谢啦
----------------------------------------------------js---------------------------------------------------
<script type="text/javascript">
window.onload=function(){
var nav_lis=document.getElementById("nav_list").getElementsByTagName("li");
for (var i=0;i<nav_lis.length;i++ )
{ var submenue=nav_lis[i].getElementsByTagName("div");
nav_lis[i].onmouseover=function(){this.lastChild.style.display='block';this.className='hover';}
nav_lis[i].onmouseout=function(){this.lastChild.style.display='none';this.className='';}
}
}
</script>
---------------------------------------------------css------------------------------------------------
ul,li{padding:0;margin:0; list-style:none}
body {font-size:12px;padding:0 10px;text-align:left;}
.nav_box{width:230px;border:1px solid #cc3300;font:12px/1.5; margin-top:50px; border-width:2px 0 1px 0}
.nav_box a{ text-decoration:none;color:#CC3300}
.nav_box a:hover{text-decoration:underline}
.nav_title{height:24px;color:#CC3300;padding:5px 17px 0px;font-weight:bold;line-height:24px; border-bottom:1px solid #cc3300}
.nav_main{padding:8px 0;}
.nav_list{padding-left:3px; z-index:70}
.nav_list li{padding:0 8px;;border:1px solid #fff;height:30px;vertical-align: bottom; display:block;}
.nav_list .hover{border:1px solid #CC3300;position:relative}
.nav_list .hover s{ display:block;width:3px;height:30px; overflow:hidden; position:absolute;right:74px;_right:73px;top:0; background:#fff; z-index:80}
.nav_list span a{display:block;height:30px;line-height:30px;width:150px }
.detail_box{width:250px;background:#fff;position:absolute;border:1px solid #CC3300;left:150px;top:-30px;display:none; z-index:77;padding:10px;line-height:24px;color:#999999; padding-bottom:100px}
.detail_box a{ margin:0 3px; white-space:nowrap}
.more_icon{float:right; line-height:30px;color:#cc3300;font-size:10px; padding-right:10px}
------------------------------------------html------------------------------------------------------
<body><div class="nav_box"><div class="nav_title">全部商品分类</div>
<div class="nav_main"><ul class="nav_list" id="nav_list">
<li><span><span class="more_icon">></span><a href="#" onfocus="this.blur()">·化妆美容</a></span><s></s>
<div class="detail_box"><a href="#">商品名称</a>|<a href="#">商品名称</a>|<a href="#">商品名称</a>|<a href="#">商品名称</a>|<a href="#">商品名称</a>|<a href="#">商品名称</a>|<a href="#">商品名称</a></div></li>
<li><span><span class="more_icon">></span><a href="#" onfocus="this.blur()">·化妆美容</a></span><s></s>
<div class="detail_box"></div></li>
<li><span><span class="more_icon">></span><a href="#" onfocus="this.blur()">·化妆美容</a></span><s></s>
<div class="detail_box"></div></li>
</ul>
</div><!--nav_main结束-->
</div><!-- nav_box结束-->
</body> 展开
----------------------------------------------------js---------------------------------------------------
<script type="text/javascript">
window.onload=function(){
var nav_lis=document.getElementById("nav_list").getElementsByTagName("li");
for (var i=0;i<nav_lis.length;i++ )
{ var submenue=nav_lis[i].getElementsByTagName("div");
nav_lis[i].onmouseover=function(){this.lastChild.style.display='block';this.className='hover';}
nav_lis[i].onmouseout=function(){this.lastChild.style.display='none';this.className='';}
}
}
</script>
---------------------------------------------------css------------------------------------------------
ul,li{padding:0;margin:0; list-style:none}
body {font-size:12px;padding:0 10px;text-align:left;}
.nav_box{width:230px;border:1px solid #cc3300;font:12px/1.5; margin-top:50px; border-width:2px 0 1px 0}
.nav_box a{ text-decoration:none;color:#CC3300}
.nav_box a:hover{text-decoration:underline}
.nav_title{height:24px;color:#CC3300;padding:5px 17px 0px;font-weight:bold;line-height:24px; border-bottom:1px solid #cc3300}
.nav_main{padding:8px 0;}
.nav_list{padding-left:3px; z-index:70}
.nav_list li{padding:0 8px;;border:1px solid #fff;height:30px;vertical-align: bottom; display:block;}
.nav_list .hover{border:1px solid #CC3300;position:relative}
.nav_list .hover s{ display:block;width:3px;height:30px; overflow:hidden; position:absolute;right:74px;_right:73px;top:0; background:#fff; z-index:80}
.nav_list span a{display:block;height:30px;line-height:30px;width:150px }
.detail_box{width:250px;background:#fff;position:absolute;border:1px solid #CC3300;left:150px;top:-30px;display:none; z-index:77;padding:10px;line-height:24px;color:#999999; padding-bottom:100px}
.detail_box a{ margin:0 3px; white-space:nowrap}
.more_icon{float:right; line-height:30px;color:#cc3300;font-size:10px; padding-right:10px}
------------------------------------------html------------------------------------------------------
<body><div class="nav_box"><div class="nav_title">全部商品分类</div>
<div class="nav_main"><ul class="nav_list" id="nav_list">
<li><span><span class="more_icon">></span><a href="#" onfocus="this.blur()">·化妆美容</a></span><s></s>
<div class="detail_box"><a href="#">商品名称</a>|<a href="#">商品名称</a>|<a href="#">商品名称</a>|<a href="#">商品名称</a>|<a href="#">商品名称</a>|<a href="#">商品名称</a>|<a href="#">商品名称</a></div></li>
<li><span><span class="more_icon">></span><a href="#" onfocus="this.blur()">·化妆美容</a></span><s></s>
<div class="detail_box"></div></li>
<li><span><span class="more_icon">></span><a href="#" onfocus="this.blur()">·化妆美容</a></span><s></s>
<div class="detail_box"></div></li>
</ul>
</div><!--nav_main结束-->
</div><!-- nav_box结束-->
</body> 展开
2个回答
展开全部
你好，最简单的一个方法只样式即可：给主导航的a添加一个背景，此处为白色，LZ可以试一下！
.nav_list span a{display:block;height:30px;line-height:30px;width:150px ; background:#fff;;}
.nav_list span a{display:block;height:30px;line-height:30px;width:150px ; background:#fff;;}
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
微测检测5.10
2023-05-10 广告
您好！建议咨 深圳市微测检测有限公司，已建立起十余个专业实验室，企业通过微测检测就可以获得一站式的测试与认 证解决方案；(EMC、RF、MFi、BQB、QI、USB、安全、锂电池、快充、汽车电子EMC、汽车手机互 联、语音通话质量），认证遇...
点击进入详情页
本回答由微测检测5.10提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
