CSS menu explanation wanted

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!


I figured out the solution to my problem, however I am utterly
clueless as to why it works. Could someone explain it to me?

Here was my problem:

I have a CSS menu with a image change underneath the menu upon
different menu item hovers.  The menu items themselves are also
images, with partial transparency so the changing image underneath can
be seen. I easily got this to work with every browser except IE
(shocking, really). In IE, I had one of two undesireable situations:
1) The hovered menu items had the necessary transparency, however the
image underneath didn't change; or 2) the image underneath changed
correctly with the hovering, however the hovered menu item lost its

The simple addition of:


in the hovered menu item's style fixed my problem, and now everything
works as it should.  WHY?!?

If you want to see the code:

[I know the code is ugly right now, it's under development...]


Site Timeline