Horrizental Menu style 2 - Pressed Button

I create a file called test.html with some code




its presence will be :



Now, putting some CSS codes in test.css file:

#menu a, #menu a:visited {
position:relative;
text-decoration:none;
background-color:#F39;
text-align:center;
}

and its presence:



Changing the text colour from blue to white:

color:#fff;

and the change is :



Making a block for meu:

display:block;

Editing the block size:

width:10em;

Making border to separate buttons

border:2px solid #fff;

Decorating each button

border-color: #F99;

It now has pink background but can not become buttons so I have some code:

border-color: #FCF #F6C #F6F #FCF;

Extending padding size in each buttons:

padding:0.25em;

Each button is bigger than before.
Removing Light Pink border among different buttons:

margin:0.5em;

Making a hover for each button:

#menu a:hover {
top:2px;
}

When I use a mouse hovering "About Us" button, it is shaked and move down a bit.

If I add a line of CSS code:

left:2px;

I will have the hoverd "About Us" button moving to right a bit.



Set the text colour always become White:

color:#fff;

At the end, I make border of each button become different:

border-color:#F6C #FCF #FCF #F69;