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>