菜单不会溢出

Question

我正在尝试创建一个垂直菜单，但遇到了溢出问题。还是真的有不溢出的问题。
在静态形状中，所有按钮的宽度应相同。

将鼠标悬停在其中一个按钮上时，我想将文本和按钮的右边框 4px 向右移动（这也意味着容器宽度也会增加 4px）。 我试图通过在锚容器的左侧添加 4px 填充来做到这一点，这应该会使容器溢出 4px 到右侧。

当悬停在 "Zagreb" 上时，它应该看起来像这样：

_________
|拆分.........|
|________|__
|...萨格勒布........|
|___________|
|扎达尔......|
|________|
|马卡尔斯卡|
|________|

但它并没有溢出，而是看看会发生什么：
http://jsfiddle.net/6vxsh61h/1/

解决方案

好的，我用 margin-right: -4px 技巧解决了这个问题。
http://jsfiddle.net/6vxsh61h/5/

Answer 1

悬停时增加宽度，例如

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

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

Answer 2

您将 <a> 元素设为块元素，这很好，但默认情况下，它们将自动设置边框框式框大小。这意味着它们将自动调整大小以适合容器的宽度，减去您定义的填充。这样，它们将始终填满容器的宽度。

要解决这个问题，你只需要定义一个宽度：

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

JSFiddle

Answer 3

添加到 a:hover 规则

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

据我所知，只需将一条规则添加到您发布的 jsfiddle 中即可达到您想要的效果