IE CSS image hover (a la Meyer) grief

[Duoas]

Hi all. I've nearly finished the home page for my wife. Sadly, I've discovered (again, surprise, surprise) IE doesn't play fair.

I wanted the home page to be a simple "splash with links" kind of thing, and I used a variation of Meyer's CSS popup technique to do it. (See this and that.)

This is what it should look like, followed by the stuff I get in other browsers:
[img]http://home.comcast.net/~mlyn7576/temp/ff-opera.png[/img]
[img]http://home.comcast.net/~mlyn7576/temp/ie6.png[/img]
[img]http://home.comcast.net/~mlyn7576/temp/safari.png[/img]

This is the HTML for the links:

<div align=center class="menu nobreak">
      <div class="menu-top-spacer"></div>
      <a
        id="menu-1" href="benefits.html"><span>Why Sign?</span><span id="menu-text-1">

          Using American Sign Language <br>
          with your children has many  <br>
          <b>Benefits</b>. &nbsp; Learn more...

          </span><img id="menu-image-1"></a><span class="hide">&nbsp;&nbsp;&nbsp;</span><a
        id="menu-2" href="melissa.html"><span>Melissa</span><span id="menu-text-2">

          Just who am I anyway?

          </span><img id="menu-image-2"></a><span class="hide">&nbsp;&nbsp;&nbsp;</span><a

            ...and so on...

          </span><img id="menu-image-5"></a>
    </div>
  </div>

And this is the CSS:

.menu
  {
  position:             relative;
  padding:              0px;
  margin:               0px;
  background:           url("images/menu.gif") no-repeat 0px 0px;
  width:                755px;
  height:               54px;
  text-align:           left;
  }

.menu span,
.menu img,
.menu a img,
.menu a span
  {
  border:               0px none;
  display:              none;
  visibility:           hidden;
  }

.menu-top-spacer
  {
  padding:              0px;
  margin:               0px;
  height:               19px;
  }

.menu a
  {
  display:              inline-block;
  top:                  19px;
  height:               25px;
  }

.menu a#menu-1
  {
  background:           url("images/menu.gif") no-repeat 0px -19px;
  width:                153px;
  }

/* ...and so on... */

.menu a:hover
  {
  border:               0px none;
  }

.menu a:hover span#menu-text-1,
.menu a:hover span#menu-text-2,
.menu a:hover span#menu-text-3,
.menu a:hover span#menu-text-4,
.menu a:hover span#menu-text-5
  {
  display:              block;
  visibility:           visible;
  position:             absolute;
  bottom:               81px;
  background:           #FFFFFB;
  font-weight:          normal;
  color:                black;
  border:               3px solid #416EB0;
  padding:              5px 7px 5px 7px;
  font-family:          "Teen Light", "Arial", "Helvetica", sans-serif;
  font-size:            larger;
  }
.menu a:hover span b
  {
  font-family:          "Teen Bold", "Arial", "Helvetica", sans-serif;
  font-weight:          bold;
  }

.menu a:hover img
  {
  display:              block;
  visibility:           visible;
  position:             absolute;
  padding:              0px;
  margin:               0px;
  height:               84px;
  }

.menu a:hover span#menu-text-1
  {
  left:                 10px;
  }
.menu a:hover img#menu-image-1
  {
  background:           url("images/menu.gif") no-repeat 0px -54px;
  left:                 0px;
  top:                  -30px;
  width:                153px;
  }

/* ...and so on... */

Clearly, I'm a rank beginner at CSS, but in any case I've clipped the code for menu items that differ only in pixel offsets and the like.

Ideally, I'd like the result to be the same as in FF and Opera.
I can live with the obnoxious "you're pointing at this" box in Safari and Konquerer.

Is there any way to tell IE that it doesn't need to booger the images both during and after mouseover?

Additional notes: I'd like to avoid JS if at all possible (except maybe for MS Win users).

Thank you for your time.