<style type="text/css">
/* credits: John Ryan @ www.freecssmenus.co.uk */
#pg {
width:600px;
height:400px;
border:2px dotted #666;
padding:5px;
padding-top:15px;
}
#pg ul {
list-style:none; 
padding:0; 
margin:0; 
width:250px; 
position:relative; 
float:left;
}
#pg ul li {
display:inline; 
width:62px; 
height:52px; 
float:left; 
margin:0 0 8px 8px;
}
#pg ul li a {
display:block; 
width:60px; 
height:50px; 
text-decoration:none; 
border:1px solid #000;
}
#pg ul li a img {
display:block; 
width:60px; 
height:50px; 
border:0;
}
#pg ul li a:hover {
white-space:normal; 
border-color:#232903;
background-color:#34160c;
}
#pg ul li a:hover img {
position:absolute; 
left:225px; top:0; 
width:auto; 
height:425px; 
border:1px solid #000;
}
#pg ul li a span {display:none}
#pg ul li a:hover span {
display:block;
position:absolute; 
left:0px; 
top:130px; 
width:335px; 
height:auto;
font-size:12px;color:#999999;
}
</style>

<style type="text/css">
/* credits: John Ryan @ www.freecssmenus.co.uk */
#pg2 {
width:600px;
height:400px;
border:2px dotted #666;
padding:5px;
padding-top:15px;
}
#pg2 ul {
list-style:none; 
padding:0; 
margin:0; 
width:180px; 
position:relative; 
float:left;
}
#pg2 ul li {
display:inline; 
width:62px; 
height:52px; 
float:left; 
margin:0 0 8px 8px;
}
#pg2 ul li a {
display:block; 
width:60px; 
height:50px; 
text-decoration:none; 
border:1px solid #000;
}
#pg2 ul li a img {
display:block; 
width:60px; 
height:50px; 
border:0;
}
#pg2 ul li a:hover {
white-space:normal; 
border-color:#232903;
background-color:#34160c;
}
#pg2 ul li a:hover img {
position:absolute; 
left:190px; top:0; 
width:auto; 
height:300px; 
border:1px solid #000;
}
#pg2 ul li a span {display:none}
#pg2 ul li a:hover span {
display:block;
position:absolute; 
left:0px; 
top:130px; 
width:335px; 
height:auto;
font-size:12px;color:#999999;
}
</style>