今天想做一個淘寶導航來練練手，遇到了邊框覆蓋的問題。如下圖：
li的紅色邊框蓋不住該灰色邊框。后來問經驗人士告訴我，這種邊框覆蓋是會出現無法100%保證正常的情況，遂得到如下3中解決方案：
1.以后遇到需要邊框覆蓋的，一般這個被覆蓋邊框用1px的圖片平鋪，這樣不占用位置，上面的來覆蓋可以輕松實現。
2.在移動到改元素上時，把被覆蓋邊框的邊框顏色設置為何覆蓋邊框的顏色一樣。
3.基於2，在移動到改元素上時，把被覆蓋邊框的邊框顏色設置為none。
<!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> <title></title> <link rel="stylesheet" type="text/css" href="css/nav.css"> </head> <body> <div class="content" > <div class="nav_left"> <ul> <li class="nav_first_li"><div><span>服飾內衣</span></div></li> <li class="selected"><div><span>汽車用品</span></div></li> <li><div><span>居家家具</span></div></li> <li><div><span>在線教育</span></div></li> <li><div><span>文化娛樂</span></div></li> <li class="nav_last_li"><div><span>手機數碼</span></div></li> </ul> </div> <div class="nav_right"> </div> </div> </body> </html>
/* 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;
}