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

i'm trying make can use menu this

to fair barely understood , informed can use style hover function.

here's tried code:

<center>     <ul>         <li>             <a href="audioragehome.aspx"><img src="images/audioragegiftype/audioragebanner.gif" alt="welcome audiorage!"/></a>         </li>         <li>             <a href="audioragehome.aspx"><img src="images/audioragegiftype/audioragebuttonhome.gif" alt="home"/></a>             <img class="showhim" src="images/audioragegiftype/audioragebuttonstore.gif" alt="store" />             <a href="audiorageabout.aspx"><img src="images/audioragegiftype/audioragebuttonabout.gif" alt="about"/></a>             <a href="audioragecart.aspx"><img src="images/audioragegiftype/audioragebuttoncart.gif" alt="cart"/></a>         </li>                         </ul> </center> <br /> <center>     <div class="showme">i want show!!</div> </center> 

here's css

.showme {  display: none; } .showhim:hover .showme { display: block; } 

here's pre-made link of code jsfiddle

this won't work because display:block rule looking .showhim being hovers child of .showme. can couple of ways.

---

targeting 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 show!!</span> </span> 

---

or targeting sibling jsfiddle

css

.showhim:hover + .showme { display: block; }

html

<img class="showhim" src="images/audioragegiftype/audioragebuttonstore.gif" alt="store" /> <span class="showme">i want show!!</span> 

---

the typical menu structured makes easy target hidden item. jsfiddle

html

<ul class="menu">     <li>         menu item         <ul class="submenu">             <li>sub menu item</li>         </ul>     </li>     ...  </ul> 

css

.submenu {     display:none; } .menu > li:hover .submenu {     display:block; }