Css 如何在悬停时控制div:？

我找到了一种方法，可以在鼠标悬停时更改菜单选项的背景色。但是，当你悬停一个选项时，它会占用一些较大的空间，从而将所有其他选项向右移动，这有点烦人，我想保持一个一致的空间，因此如果我悬停，只有颜色应该改变，而不是选项向右移动。就像facebook的菜单选项一样

代码如下：

  <div id="menu">
  <a href="/hello" id="option">home</a>
  <a href="/hello" id="option">profile</a>
  <a href="/hello" id="option">account</a>
  <a href="/hello" id="option">settings</a>
  <a href="/hello" id="option">extra</a>
  <a href="/hello" id="option">logout</a>
  </div>

---

移除

填充：10px

元素周围的空间会占用空间，因此如果不需要空间，请不要添加它。如果您一直想要它，请一直添加它，而不仅仅是为了
：hover


此外，与您的问题无关，但只是良好的实践：


如果您使用的浏览器不支持CSS、已关闭或不是图形化的，那么您最终会使用home profile帐户设置进行额外注销-您有一个链接列表，请使用。这里有很多
id在文档中必须是唯一的，仅用于标识特定元素。如果要声明一组元素都是同一个类的成员，请使用class属性
避免使用与相同的类和id名称，这只会使代码混淆
1）您在“选项”中缺少一个“选项”

2） 你为什么在悬停状态下移动？当您将鼠标悬停在其上方时，这将导致移动。
我正在使用填充，因此选项左侧和右侧的空白也会改变颜色。这是在添加空白。这些锚之间有空白，所以它实际上会呈现一个非常可读的“主配置文件帐户设置额外注销”。不是说使用一个合适的HTML列表不是一个好主意，只是这不是原因。我不需要空间，对吗。但是我使用了填充，所以选项左侧和右侧的空白也会改变颜色。这是在添加空白。@coreyward-很好，尽管对于不在链接下面划线的浏览器（如lynx），这仍然是一个问题-您无法分辨一个链接的结束和下一个链接的开始。@AAA-您在添加额外的空间，而不是对现有的空间着色。正如我所说的，使用列表标记并查看listamatic，它有很多类似的例子。适当地设计事物的风格。如果你添加了填充，那么就一直添加。可能的解决方案是：在菜单选项之前和之后使用，让我看到我需要的外观。但不确定这是否是一个好的做法？
  div#menu {
  margin-left: 630px;
  margin-top:-20px;
  }
  option {
  margin-left: 20px;
  }
  #option:hover{
  background: #3F2327;
  padding: 10px;
  }