how to show the image while mouse over li

See more:

HTML

In the following code I am able to show the image in class '.location1' when the mouse house hovers commonly at the last ul. Actually I want to show the image in class 'location1' , only when the mouse hovers on 'location' text li id='smap'.

.imageBox1 ul li ul .location1
{
 display:none;

}
.imageBox1 ul li ul:hover>.location1
{
display:block;
position:absolute;

}

<div class="imageBox1">
 <ul>
 <li class="img1"><img src="apt1.jpg" /><br>
 <span style="font-size:large; text-align:center; font-weight:bold;">Vasans Riveria-RS Puram</span>
  <ul>
 <li id="smap"><a href="#" > <span style="color:Silver;  ">Location</span></a></li>
 <li class="location1"><img src="twobhksitemap.jpg"  style=" width:120px; background-color:Blue"/></li>
 <li><a href="two_bhk_floorplan.aspx"<span style="color:Silver;">2 bhk plan</span></a></li>

...