I found a way to change the background color of a menu option upon hover. However, when you hover an option, it takes up some wide space that moves all the other options to the right, its sort of annoying, i want to maintain a consistent space, so if i hover, only the color should change, not the option moving to the right. Sort of the way facebook has its menu options.

Below is the code:

  <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>

CSS:

  div#menu {
  margin-left: 630px;
  margin-top:-20px;
  }
  option {
  margin-left: 20px;
  }
  #option:hover{
  background: #3F2327;
  padding: 10px;
  }