PDA

View Full Version : <li> menu rollover with image



nickphonics18
Feb 26th, 2012, 10:43 PM
I am creating a website. Using CSS i have done a simple inline list menu. On the rollover of each menu link i want an image to appear central above the text. But i can't figure out how to do this.

Like this... http://postimage.org/image/bstg0jv6l/

This is what i have done so far...



#nav-menu ul {
font-weight: bold;
font-size: 1.2em;
color: #FFF;
list-style-type: none;
}
#nav-menu li {
margin-right: 7px;
display: inline;
}
#nav-menu li a {
color: #FFF;
text-decoration: none;
}

#nav-menu li a:hover {
color: #3C0D03;
text-decoration: none;
}
#nav-menu ul li a:active {
color: #F4A9CA;
}

stevenmw
Feb 27th, 2012, 05:50 AM
CSS


#nav-menu li a {
background-color: #BBBBBB;
padding-top: 10px;
width: 55px;
}

#nav-menu li a:hover {
background-image: url('nx.png');
background-repeat: no-repeat;
background-position: center top;
background-color: #00ee00;
padding-top: 10px;
width: 55px;
}


Just fill in the rest of the link states to match the link a

nickphonics18
Feb 27th, 2012, 10:16 PM
perfect thanks! worked a treat!