菜单不会溢出

Question

我正在尝试创建一个垂直菜单，但却遇到了溢出问题。或者实际上是没有溢出的问题 在静态形状中，所有按钮应具有相同的宽度。

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

当悬停在“萨格勒布”上时，它应该看起来像这样：

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

但它不会溢出，而是看看会发生什么：
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：悬停规则

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

只需将一条规则添加到您发布的jsfiddle，就可以了解您想要的效果