当你悬停时，菜单如何保持静止？

Question

我有这个样本：

link

代码HTML：

<ul>
    <li>MENIU 1</li>
    <li>MENIU 2</li>
    <li>MENIU 3</li>
    <li>MENIU 4</li>
</ul>

CODE CSS：

ul {list-style-type:none;}
ul li:hover{
    border-left:5px solid red;
}

我的问题很简单......当您将箭头放在菜单上时，菜单项会向右移动几个像素。

如何阻止它移动？

编辑：

也许我没有解释好......我不想要另一个边缘......当你把一个项目放在列表中时，箭头会出现红色床头板，而我的文字会出现在右侧

Answer 1

您正在添加一些以前不存在的空间，这会导致所选项目向右移动。您需要做的就是在项目悬停时添加透明边框。

ul {list-style-type:none;}
ul li{border-left:5px solid transparent;}
ul li:hover{border-left:5px solid red;}

Answer 2

尝试设置默认的trasparent border：

ul li {border: 5px solid transparent;}

Answer 3

菜单li正在移动，因为您添加 5px边框，之前没有。这会增加整个盒子的大小，并将其向右移动以为边框腾出空间。

你可以通过一直保持5px的边框来解决这个问题，但是要保持透明直到悬停，所以5px总是在那里而且盒子不会移动。

只需在不悬停时为li添加CSS规则：

ul li {
    border-right: 5px solid transparent;
}

Answer 4

添加透明边框。

ul {list-style-type:none;}
ul li{border-left:5px solid transparent;}
ul li:hover{
    border-left:5px solid red;
}

工作演示https://jsfiddle.net/geekrose/ebepwj1m/2/

Answer 5

为li添加默认透明边框：

ul li{ border-left:5px solid transparent }

Answer 6

您好，现在您可以像这样填充

ul {list-style-type:none;}
ul li{padding-left:5px;}
ul li:hover{
    border-left:5px solid red;
    padding-left:0;
}

演示示例

ul {list-style-type:none;}
ul li{padding-left:5px;}
ul li:hover{
    border-left:5px solid red;
    padding-left:0;
}

<ul>
    <li>MENIU 1</li>
    <li>MENIU 2</li>
    <li>MENIU 3</li>
    <li>MENIU 4</li>
</ul>

Answer 7

为ul li类添加透明边框。

ul li{
border-left: 5px solid transparent;  
}

以下将是您的最终CSS

ul {list-style-type:none; }
ul li{
border-left: 5px solid transparent;  
}
ul li:hover{
border-left:5px solid red;
}