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