Why is my image rollover not working in Firefox?

Question

I am starting a new site.  In the middle of the page on the right, I have a simple image rollover effect for the UPCOMING EVENTS button.  It is also supposed to link to another page (not designed yet).  It works in Explorer, not in Firefox.  How can I fix this?  I suppose I can revert to javascript but it adds a lot of coding to the page.  I don't know what to do.    http://jeannettedutton.com/MLVC/

Answer 1

In Menu.css, change this -
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%;  /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:0;
    overflow:visible;
to this -
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%;  /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:999;
    overflow:visible;