html - 悬停时菜单如何保持静止？

Question

我有这个样本:

link

代码 HTML:

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

代码 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;}