Dropdown menu link disappears on mouse over.

Can someone please throw some light on this for me?
I have a WAMP localhost installation; the site is not live online.

I’m using a “twentyten” child theme with a custom style.css that’s working well—a working copy of the original twentyten style.css.

PROBLEM:
I have a 30px-tall background image in the following menu #.
I mouse over a link in the menu bar.
The drop-down menu link appears under it, but it has about 5px of extra space at the bottom under the background image.
I pull down and mouse over the visible drop-down link.
THE DROP-DOWN LINK DISAPPEARS instantly.

However, when I rapidly and repeatedly mouse over the menubar link, and the subsequent area where the drop-down link should appear under it, sometimes it DOES appear! But for the most part, it just goes away.

The CSS:

#access ul ul a {
	background-image:url('https://xxx.../background30.png');
	background-repeat: repeat-x;
	line-height: 1em;
	padding: 10px;
	width: auto;
	height: auto;
}

#access li:hover > a,
#access ul ul :hover > a {
	background-image:url('https://localhost/wordpress/wp-content/knujselif/scihparg/siteimages/background30.png');
	background-repeat: repeat-x;
	color: #ff47ed;
}