菜單不溢出

Question

我想創建一個垂直菜單，但與溢出問題的鬥爭。或者實際上沒有溢出的問題。
在靜態形狀中，所有按鈕應具有相同的寬度。

當將鼠標懸停在其中一個按鈕上時，我想將文本和按鈕4px的右邊框向右移動（這意味着容器寬度也會增加4px）。 我試圖通過在錨定容器中向左側添加4px填充來完成此操作，這會使容器的右側溢出4px。

當鼠標懸停在 「薩格勒布」，它應該是某事像這樣：

_________
|分割......... |
| ________ | __
| ...薩格勒布........ |
| ___________ |
|扎達爾....... |
| ________ |
|馬卡爾斯卡|
| ________ |

但它不會溢出，而不是看看會發生什麼：
http://jsfiddle.net/6vxsh61h/1/

SOLUTION

好，我懂了固定與margin-right: -4px伎倆。
http://jsfiddle.net/6vxsh61h/5/

Answer 1

添加到一個：懸停規則

a:hover { 
    margin-right: -4px; 
} 

只需添加一個規則到的jsfiddle你張貼有你想要的效果，因爲我理解它

Answer 2

增加懸停時的寬度，例如，

a:hover { 
width:105%; 
    background: rgb(120,216,230); 
    box-shadow: 0px 0 5px 1px grey !important; 
} 

演示：http://jsfiddle.net/6vxsh61h/4/

Answer 3

你讓你的<a>元素塊元素，這是很好的，但默認情況下，它們將被自動設置與邊界框式的盒大小。這意味着它們將被自動化以適應容器的寬度，減去您定義的填充。這樣，它們將始終填充容器的寬度。

要解決這個問題，你只需要定義一個寬度：

a 
{ 
    width: calc(100% - 20px); 
} 

JSFiddle