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