CSS Hover over an image to make a sub menu appear - asp.net

Question

I'm trying to make it so that I can use a menu like this
To be fair I barely understood this and I was informed that you can use a style with the hover function.
Here's what I tried with my code:
<center>
<ul>
<li>
<img src="images/audiorageGIFtype/audiorageBanner.gif" alt="Welcome to AudioRage!"/>
</li>
<li>
<img src="images/audiorageGIFtype/audiorageButtonHome.gif" alt="Home"/>
<img class="showHim" src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" />
<img src="images/audiorageGIFtype/audiorageButtonAbout.gif" alt="About"/>
<img src="images/audiorageGIFtype/audiorageButtonCart.gif" alt="Cart"/>
</li>
</ul>
</center>
<br />
<center>
<div class="showMe">I want this to show!!</div>
</center>
Here's the CSS
.showMe
{
display: none;
}
.showHim:hover .showMe
{
display: block;
}
Here's a pre-made link of the code to JSFIDDLE

Answer 1

This won't work because your display:block rule is looking for .showHim that is being hovers with the child of .showMe. You can do it a couple of ways.
Targeting a hidden child: jsFiddle
CSS
.hoverme:hover .showMe {
display: block;
}
HTML
<span class="hoverme">
<img class="showHim" src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" />
<span class="showMe">I want this to show!!</span>
</span>
Or targeting a sibling jsFiddle
CSS
.showHim:hover + .showMe {
display: block;
}
HTML
<img class="showHim" src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" />
<span class="showMe">I want this to show!!</span>
The typical menu is structured like this which makes it easy to target the hidden item. jsFiddle
HTML
<ul class="menu">
<li>
Some menu item
<ul class="submenu">
<li>Sub menu item</li>
</ul>
</li>
...
</ul>
CSS
.submenu {
display:none;
}
.menu > li:hover .submenu {
display:block;
}

Answer 2

You need to use some jQuery here to make if work:
$(".showHim").hover(
function () {
$('.showMe').css("display","block");
},
function () {
$('.showMe').css("display","none");
}
);
});
Here working example

Answer 3

for this you need to change your html structure
html code
<center>
<ul>
<li><img src="images/audiorageGIFtype/audiorageBanner.gif" alt="Welcome to AudioRage!"/></li>
<li><img src="images/audiorageGIFtype/audiorageButtonHome.gif" alt="Home"/></li>
<li class="showHim"><img src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" />
<div class="showMe">I want this to show!!</div></li>
<li><img src="images/audiorageGIFtype/audiorageButtonAbout.gif" alt="About"/></li>
<li><img src="images/audiorageGIFtype/audiorageButtonCart.gif" alt="Cart"/></li>
</ul>
</center>
CSS Code
.showMe{
display: none;
}
.showHim:hover .showMe{
display: block;
}
JsFiddle file