change width of vertical menu item that is floated right

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>

As you can see, I want the menu item to get wider on hover, and it does, but the problem is it gets wider on the right side and all other menu items move to the left. I want only the hovered item to be wider and move to the left while the others stay still.

I may try this to do this with JavaScript later for slow-mo opening. For now I'm trying css hover because its faster to test.

Answer 1

See the live demo http://jsfiddle.net/d4zow6px/

This did the job,

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