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;

Horrizental Menu style 1

Step 1 => creating div tag in test.html file.



its presence will be :



Now in test.css file, I have some lines of code

#menu a, #menu a:visited {
text-align:center;
text-decoration:none;
color:#000;
display:block;
width:7em;
height:1.2em;
border:0.5em solid #fff;
}
and its presence after having the code:



Making a hover for each text in the menu:
#menu a:hover {
color:#fff;
background-color:#b2ab9b;
border-color:#dfd7ca #b2ab9b;
}
and its presence now:

So full code of css is :

#menu a, #menu a:visited {
text-align:center;
text-decoration:none;
color:#000;
display:block;
width:7em;
height:1.2em;
border:0.5em solid #fff;
}
#menu a:hover {
color:#fff;
background-color:#b2ab9b;
border-color:#dfd7ca #b2ab9b;
}

We can change a bit different look by chaning border in menu

#menu a, #menu a:visited {
text-align:center;
text-decoration:none;
color:#000;
display:block;
width:7em;
height:1.2em;
border:0.5em solid #abc;// a look is changed by this line

Vertical Menu

Having coding for vertical menu design:



and its look :



Creating a file called menu_category.css :
code menu background

#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}

its look is changed a bit different



Using these code t0 change the name : NAVIGATION

#vertmenu h1 {
display: block;
background-color:#F9C;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}

Removing all bullets by :

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

#vertmenu ul li {
margin: 0px;
padding: 0px;
}

Making buttons and changing text style for menu:

#vertmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}

Making a colour hover and colour texts for navigation buttons

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #ffffff;
background-color: #F9C;
}