Sub menu vertical image alignment in drop down navigation

After having such a great experience here with my first post, (http://www.csscreator.com/css-forum/ftopic8752.html , thanks Hugo!) it was easy to decide to post another question! Maybe someone can help with this?

After days of experimenting with the Suckerfish dropdown menu, I finally found a solution by tjkdesign that works beautifully for my situation. (http://www.tjkdesign.com/articles/dropdown/default.asp)

However, unlike all of the examples I could find out there, my drop down menu is made up of images of differing heights.

Also, it seems that Explorer and Firefox interpret the line-height and/or the top-margins differently with regard to the vertical positioning of the sub menus. Does anyone know if there is any simple way to make the sub menus line up with the top of the button images? I have currently set the top-margin to -30 to average it out so that it is at least functional. I also tried creating a span class with a differing margin-top but Safari freaked out about it - turned on all the buttons all the time- so I abandoned that idea.

Here is the site: http://www.industriousbird.com/mcw/site

and

Here is the code:

css:

#zUL,#zUL ul {
padding:0;
margin:0;
}

#zUL li ul a {
margin-left:0px;
display:block;
}

#zUL li {
float:left;
width:110px;
position:relative;
list-style-type:none;
}

#zUL li a {
width: 99px;
w\idth : 98px;
height:100%;
display : block;
}

#zUL li ul {
visibility:hidden;
position:absolute;
width:98px;
margin-left: 110px;
margin-top:-30px;
}

#zUL li:hover ul,
#zUL li.msieFix ul {
visibility:visible;
background-color:transparent;
}

* html #zUL li:hover ul,
* html #zUL li.msieFix ul {
top:1.1em;
left:0px;
}

--------------
html:

<ul id="zUL">
<li onmouseover="this.className='msieFix';imgOff('img1')" onmouseout="this.className='';imgOn('img1')"><a href="index.php"><img name="img1" src="images/n-home-a.gif" width="110" height="25" border="0"></a></li>

<li onmouseover="this.className='msieFix';imgOff('img2')" onmouseout="this.className='';imgOn('img2')"><a href="#"><img name="img2" img src="images/n-services-a.gif" width="110" height="27" border="0"></a>
<ul>
<li onmouseover="imgOff('img10')" onmouseout="imgOn('img10')">
<a href="wash.php"><img name="img10" src="images/ns-wash-a.gif" width="98" height="24" border="0"></a></li>
<li onmouseover="imgOff('img11')" onmouseout="imgOn('img11')">
<a href="detail.php"><img name="img11" src="images/ns-detail-a.gif" width="98" height="25" border="0"></a></li>
</ul>
</li>

<li onmouseover="this.className='msieFix';imgOff('img3')" onmouseout="this.className='';imgOn('img3')"><a href="caffe.php"><img name="img3" src="images/n-caffe-a.gif" width="110" height="42" border="0"></a></li>

etc....