CSS 如何做到像图中一样隐藏边框的某一段？

[rundis]

rt，想要做到如图这样的效果，上面的ul的棕色底部边框的一小段是白色的。

首先按照找到的源码大致意思：

ul {border-bottom: 2px solid #8B4513;}
li:hover {border-bottom: 2px solid #FFF;}

具体就是让li的底部边框挡住ul底部边框的那部分，然而效果并不是挡住，而是li的白色底部边框往下挤ul的棕色边框。

另外sf里面也有类似的部分，使用的大概是这样：

li {border: 1px solid grey;}
ul {border-top: 1px solid grey;}
li:hover {border-bottom-color: transparent;}

基本大同小异，问题也是相似的，li原有的边框的底部把ul的边框挤开了。。。

实在思考不出怎么办。。新手求助，谢谢！

[Septembers]

see http://www.w3school.com.cn/css/css_positioning_relative.asp

[xmgit]

定义 position 没

[rundis]

@Septembers
@Bardon
谢谢，已经解决了！