更改向右浮动的垂直菜单项的宽度

Question

#mainMenu {
  float: right;
  margin-top: 70px;
  padding: 0;
  list-style: none;
  // position: relative;

}
#mainMenu li {
  box-sizing: border-box;
  width: 250px;
  height: 70px;
  background-color: rgba(0, 168, 107, 1);
  border: rgba(76, 76, 76, 0.2) 1px solid;
}
#mainMenu li:hover {
  background-color: rgb(2, 100, 59);
  margin-right: 50px;
}

<ul id="mainMenu">
  <li value="1"></li>
  <li val="2"></li>
  <li val="3"></li>
  <li val="4"></li>
  <li val="5"></li>
  <li val="6"></li>
</ul>

如您所见，我希望菜单项在悬停时变宽，确实如此，但问题是它在右侧变宽，而所有其他菜单项都向左移动。我只希望悬停的项目更宽并向左移动，而其他项目保持不动。

稍后我可能会尝试使用 JavaScript 执行此操作，以实现慢动作打开。 现在我正在尝试 css hover 因为它的测试速度更快。

Answer 1

观看现场演示http://jsfiddle.net/d4zow6px/

这完成了工作，

#mainMenu li:hover{
  background-color: rgb(2,100,59);
  width: 300px;
  margin-left: -50px;
}