在div上顯示li？邊框問題

Question

所以我正在嘗試構建一些我在Photoshop中製作的東西。

我試圖讓<li> ontop的邊界，以便它隱藏在右邊界。 （這有意義嗎？）

這裏是一個小提琴：http://jsfiddle.net/5dksT/ 注意，當您將鼠標懸停在<li> /鏈接上時，會顯示右邊框。

我該如何解決這個問題，以便每個鋰都能進入並隱藏邊界？或者還有其他解決方案嗎？

感謝

Answer 1

給一個合理的利潤率-1px，改變右邊框顏色爲白色。

.panel_nav li { 
    margin:15px -1px 0 20px; 
} 
.panel_nav li:hover{ 
    border-right-color: #fff; 
} 

http://jsfiddle.net/5dksT/5/

Answer 2

我添加到您的li ...

position: relative; 
right: -1px 

^{（或者你可以你的保證金改爲15px -1px 0 20px到1px把它的權利。）}

.. 。和你的li:hover ...

border-right: none; 

...它的工作！

jsFiddle。

Answer 3

只測試了這個在Chrome 12，因爲我不是在我的dev的機器的那一刻：

更改此：

.panel_nav li{list-style:none;padding:10px;margin:15px 0 0 20px;} 

到：

.panel_nav li{list-style:none;padding:10px;margin:15px -1px 0 20px;} 

，並結束的li：hover（在「border：」語句之後，否則它將默認爲#ccc）：

border-right: 1px solid #fff; 

http://jsfiddle.net/waitinforatrain/5dksT/4/

這將右邊距爲負1px的