Rollover images do not replace page title in menu

I am coding this without JS. I am almost successful in that the images I’ve created for the menu items show up, and they have a mimicked background to match the menu bar. But the menu text titles won’t go away. I’ve tried z-index et al & nothing seems to work.

Here’s my code (WordPress 3.8.2 – Harmony Theme): {showing the whole section in case something is out of order}

#top-menu { float: left; }
#top-menu ul { display: inline-block; }
#top-menu a { font-size: 16px; color: #411212; padding: 35px 35px 35px; font-weight: 400; }
#top-menu > ul > li:first-child > a { padding-left: 0px; background: none;}
#top-menu ul > li.menu-item a:hover {margin-top: 0px; }
#top-menu ul > li.menu-item-35 a{ background:url(images/delfino_button.png) center top no-repeat!important;
}
#top-menu ul > li.menu-item-36 a{ background:url(images/wines_button.png) center top no-repeat!important;
}
#top-menu ul > li.menu-item-41 a{ background:url(images/cottage_button.png) center top no-repeat!important;
}
#top-menu ul > li.menu-item-237 a{ background:url(images/vineyard_button.png) center top no-repeat!important;
}
#top-menu ul > li.menu-item-80 a{ background:url(images/events_button.png) center top no-repeat!important;
}
#top-menu ul > li.menu-item-33 a{ background:url(images/contact_button.png) center top no-repeat!important;
}
#top-menu ul > li.current-menu-item > a { font-weight: 600; }