CSS+jQuery问题，两个边框连接处怎么去除边框？实例京东商城左侧的商品类目导航

<!DOCTaYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1... <!DOCTaYPE 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=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px}
ul,li{list-style-type:none;padding:0px}
.menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}
.optn{width:190px;line-height:28px;border-top:dashed 1px #ccc}
.content{padding-top:10px;clear:left}
a{text-decoration:none;color:#666;padding:10px}
.optnFocus{background-color:#fff;font-weight:bold}
div{padding:10px}
div img{float:left;padding-right:6px}
span{padding-top:3px;font-size:14px;font-weight:bold;float:left}

.tip li{line-height:23px}
#sort{position:absolute;display:none}
.focus{border:solid 2px red;background-color:#ccc}
.tip{width:190px;position:absolute;padding:10px;display:none;}
</style>
<body>
<script type="text/javascript">
$(function(){
$('.optn').bind({mouseover:function(){
var liTop = 10;
var liLeft = $(this).offset().left+$(this).width();
if(($(this).offset().top)>($(this).next('ul').height())){
liTop = $(this).offset().top;
}
$(this).css('border-right','solid 2px #00FFFF');
$(this).next('.tip').show().css({'left':liLeft+'px',top:liTop+'px'});
$(this).addClass('focus');
$(this).next('.tip').addClass('focus');
},mouseout:function(){
$(this).next('.tip').hide();
$(this).removeClass('focus');
}});
});

</script>

<ul>
<li class="menu">
<div>
<span>电脑数码产品</span>
</div>
<ul class="content">
<li class="optn"><a href="#">笔记本</a></li>
<ul class="tip">
<li><a href="#">笔记本1</a></li>
<li><a href="#">笔记本1</a></li>
<li><a href="#">笔记本1</a></li>
<li><a href="#">笔记本1</a></li>
<li><a href="#">笔记本1</a></li>
</ul><li class="optn"><a href="#">移动硬盘</a></li>
<ul class="tip">
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘1</a></li>
</ul><li class="optn"><a href="#">电脑软件</a></li>
<ul class="tip">
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件1</a></li>
</ul><li class="optn"><a href="#">数码产品</a></li>
<ul class="tip">
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品1</a></li>
</ul>
</ul>
</li>
</ul>
<span></span>
</body>
</html> 展开

 我来答

3个回答

#合辑# 面试问优缺点怎么回答最加分？

百度网友d28f4fd
2012-04-09 · 超过21用户采纳过TA的回答

知道答主

回答量：59

采纳率：100%

帮助的人：58.3万

我也去答题访问个人页

关注

展开全部

方法主要是层和绝对以及相对定位的问题
属性 position（定位）和z-index（层）
具体操作就是和上面说的一一样了

已赞过 已踩过<

评论收起

百度网友06a9dd3
推荐于2016-09-22 · TA获得超过533个赞

知道小有建树答主

回答量：197

采纳率：0%

帮助的人：266万

我也去答题访问个人页

关注

展开全部

修改了一些地方，供你参考下：
<style type="text/css">
body{font-size:12px}
ul,li{list-style-type:none;padding:0px}
.menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}
.optn{width:190px;line-height:28px;border-top:dashed 1px #ccc}
.content{padding-top:10px;clear:left}
a{text-decoration:none;color:#666;padding:10px}
.optnFocus{background-color:#fff;font-weight:bold}
div{padding:10px}
div img{float:left;padding-right:6px}
span{padding-top:3px;font-size:14px;font-weight:bold;float:left}

.tip li{line-height:23px}
#sort{position:absolute;display:none}
.focus{border:solid 1px red;background-color:#ccc; }/*修改了这里*/
.tip{width:190px;position:absolute;padding:10px;display:none; z-index:-1;}/*修改了这里*/
</style>
<body>
<script type="text/javascript">
$(function(){
$('.optn').bind({mouseover:function(){
var liTop = 10;
var liLeft = $(this).offset().left+$(this).width();
if(($(this).offset().top)>($(this).next('ul').height())){
liTop = $(this).offset().top;
}
$(this).css('border-right','1px solid #ccc');//修改了这里
$(this).next('.tip').show().css({'left':(liLeft+1)+'px',top:liTop+'px'});//修改了这里
$(this).addClass('focus');
$(this).next('.tip').addClass('focus');
},mouseout:function(){
$(this).next('.tip').hide();
$(this).removeClass('focus');
$(this).css('border-right','none');//修改了这里
}});
});

</script>
覆盖掉你相应的代码，然后试试看。

追问

要的就是这种效果，多谢了

本回答被提问者采纳

已赞过 已踩过<

评论收起

3tiflex
2012-04-09 · TA获得超过205个赞

知道小有建树答主

回答量：249

采纳率：50%

帮助的人：204万

我也去答题访问个人页

关注

展开全部

就京东可能的方式提供点建议，没有仔细看代码
1.大框遮住了左边小框的边框
2.左边的小框本来就没有右边框

仅供参考

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

CSS+jQuery问题，两个边框连接处怎么去除边框？实例京东商城左侧的商品类目导航

其他类似问题

为你推荐：