边框覆盖问题

转载自 易成波 博客园 CSS之边框覆盖  image 今天想做一个淘宝导航来练练手，遇到了边框覆盖的问题。如下图：  image li的红色边框盖不住该灰色边框。后来问经验人士告诉我，这种边框覆盖是会出现无法100%保证正常的情况，遂得到如下3中解决方案： 1.以后遇到需要边框覆盖的，一般这个被覆盖边框用1px的图片平铺，这样不占用位置，上面的来覆盖可以轻松实现。 2.在移动到改元素上时，把被覆盖边框的边框颜色设置为何覆盖边框的颜色一样。 3.基于2，在移动到改元素上时，把被覆盖边框的边框颜色设置为none。 复制代码

• 服饰内衣
• 汽车用品
• 居家家具
• 在线教育
• 文化娱乐
• 手机数码

复制代码
复制代码
/* CSS Document */

body,ul

{
margin:0 ;
padding:0;
}
.content{
margin:0 auto;
padding:0;
background:white;
font-size:14px;
position:relative;
}
.nav_left,.nav_left ul{
width:100px;
}
.nav_left{
float:left;
margin:60px 0 0 60px;
}

.nav_left ul li{
list-style:none;
line-height:2;
width:100px;
border: 1px solid white;
border-left:1px solid #888;
border-right:1px solid #888;
margin-top:-1px;

}
.nav_left ul li:hover
{
cursor:pointer;
border:1px solid red;
border-right:1px solid white;
position:relative;
z-index: 300;

}
.nav_left ul li:hover div
{
border-top:1px solid red;

}
.nav_left ul li div
{

border-top:1px solid #666;
width:80px;
text-align:center;
margin:-1px 10px 0 10px;
padding:0;
position:relative;

}
.nav_left ul .nav_last_li
{
border-bottom:1px solid #666;

}
.nav_left ul .nav_first_li
{
border-top:1px solid #666;
}
.nav_left ul .nav_first_li div
{
margin-top:-1px;
}
.nav_right
{
width:500px;
height:500px;
border:1px solid red;
float:left;
position:relative;
z-index:200;
left:1px;
top:59px;
}

复制代码