Sample css Menu With Background image on hover

[rajasri]

Today you are going to learn how to create a simple css menu like this when hover it shows background image.

Creating css menu is quite simple First create a background image in box type and create a css file with code below

#menu {
font-family: "Trebuchet MS", Arial, san-serif;
color:#999999;
width:100%;
height:45px;
font-size:14px;
margin:1px;
display:block;
border-bottom:none;
padding-bottom:0px;
font-weight:bold;
text-decoration:none;
color:#666666;
padding-left:0px;
padding-top:16px;
padding-right:16px;
padding-bottom:-14px;
}
#menu a
{
font-family: "Trebuchet MS", Arial, san-serif;
color:#999999;
width:100%;
height:45px;
font-size:14px;
margin:1px;
display:block;
border-bottom:none;
padding-bottom:0px;
font-weight:bold;
text-decoration:none;
color:#666666;
padding-left:21px;
padding-top:16px;
padding-right:25px;
padding-bottom:-14px;
}
.aonline
{
background:url(box2.gif) no-repeat top left ;
padding-left:21px;
padding-top:16px;
padding-right:25px;
padding-bottom:-14px;
}
#menu a:hover
{
display:block;
background-position:0px;
background-position:center;
position:relative;
background:url(box2.gif) no-repeat top left ;
margin:1px;
width:100%;
height:45px;
color:white;
font-weight:bolder;
padding-left:21px;
padding-top:16px;
padding-right:25px;
padding-bottom:-14px;
}
Create html file like below

Quote:<center><b> Menu tutorial by <a href="http://walkinsforum.com" target="_blank">http://s2sgateway.com</a><br><//b>
</center>
<div id="menu">
<table>
<td width="0px"> </td>
<td align="center">
<a href="http://s2sgateway.com" class="aonline">HOME</a></td>
<td width="60px"> </td>
<td>
<a href="http://s2sgateway.com"> ABOUT US</a></td>
<td width="60px"> </td>

<td>
</table>

In order to view links, you must have to reply to this thread.
Remember if your image is in different directory change the url in css.
Any doubt ask us

happy coding