How to control div on hover:?

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, s开发者_StackOverflow中文版o 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;
  }

Remove padding: 10px;

Space around an element takes up space, so if you don't want space, don't add it. If you want it all the time, add it all the time and not just for :hover

Also, unrelated to your problem, but just good practises:

• If you use a browser that doesn't support CSS, has it turned off, or isn't graphical you end up with home profile account settings extra logout — you have a list of links, use list markup. There is plenty of guidance on making it pretty.
• An id must be unique in a document, only use it to identify a specific element. Use the class attribute if you want to state that a bunch of elements are all members of the same class.
• Avoid using class and id names that are the same as HTML elements, it just makes code confusing

1) You are missing a # on "option"

2) Why are you padding on hover? That will cause a movement when you hover above it.