Question

I was wondering if there is anything which will make my nav menu on hover disappear and bring up a background image behind the menu on which the mouse is.

I have a simple nav menu as follows:

    <ul id="nav" class="group">
    <li><a href="#" id="nav-portfolio">portfolio</a></li>
    <li><a href="#" id="nav-blog">blog</a></li>
    <li><a href="#" id="nav-me">me</a></li>
    <li><a href="#" id="nav-contact">contact</a></li>
    </ul>

And the CSS for it is:

#nav {
    float: right;
    margin: 0.9em 1.5em 1em 0.9em;
    padding-right: 2em;

}

#nav li {

    float: left;
    padding: 0 0 0 .9em;
}

Answer 1

Yea, you can use :hover for this:

#nav li:hover {
    background: url("image.png") center center no-repeat;
}