How to show a div behind navigation on rollover

Question

I'm still trying to get the hang of this web coding thing. Lord knows there is no knowing it all. SO, I'm reaching out in hopes of some help.

I have a div containing a <nav>, and let's say this nav has a <ul> with <li>'s inside it.... How would I go about making a picture appear behind the navigation based on the li highlighted. Say I have a vertical menu:

Home | Gallery | Contacts

and I want the images to extent freely. Lets say Mario appears in behind contacts on rollover. I want his head to overlap Gallery, but he should be behind Contacts. I do intend for these images to be to the far left so as not to interfere to badly with navigation. Can I do this with JUST CSS or will I need jQuery.

Answer 1

Is this what are you looking for http://jsfiddle.net/rMCMt/ ?

You can use first-child and nth-child selectors: http://jsfiddle.net/Qq9Nm/

As menu items have different widths, you have to adjust the padding and the margin individually.

The CSS code, below:

li
{
    box-shadow: 4px 4px 2px grey;
    margin: 10px;
    list-style-type: none;
    float: left;
}
li:first-child:hover,
li:nth-child(2):hover,
li:nth-child(3):hover,
li:nth-child(4):hover,
li:nth-child(5):hover
{
    background-size: 200px 200px;
    background-repeat: no-repeat;
    padding-bottom: 180px;
    margin-bottom: -170px;
}
li:first-child:hover
{
    background-image: url('http://goo.gl/RqQtl');
    padding-right: 145px;
    margin-right: -135px;
}
li:nth-child(2):hover
{
    background-image: url('http://goo.gl/TWI0t');
    padding-right: 130px;
    margin-right: -120px;
}
li:nth-child(3):hover
{
    background-image: url('http://goo.gl/xRPiq');
    padding-right: 115px;
    margin-right: -105px;
}
li:nth-child(4):hover
{
    background-image: url('http://goo.gl/u3Akz');
    padding-right: 140px;
    margin-right: -130px;
}
li:nth-child(5):hover
{
    background-image: url('http://goo.gl/Em9Ij');
    padding-right: 140px;
    margin-right: -130px;
}

and the html:

<nav>
   <ul>
      <li> HOME </li>
      <li> GALLERY </li>
      <li> CONTACTS </li>
      <li> EXTRA1 </li>
      <li> EXTRA2 </li>
   </ul>
</nav>