Sub Menu overlaps

Hi there,
I have two nested sub menus on a newly built site that seem to overlap each other in Internet explorer. Ive posted questions on various forums but havent received any fixes as yet.. Im inclined to think its a position or z-index issue but my attempts to fix have been unsuccessful.
Ive attached an image of what it should look like and what it actually does..
Any chance you could provide a css solution?

/* begin MenuSubItem */
.artmenu ul a
{
	display:block;
	text-align: center;
	white-space: nowrap;
	overflow:hidden;
	line-height: 20px;
	/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.9);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	background-position: left top;
	background-repeat: repeat-x;
	border-width: 0px;
	border-style: solid;
}

.nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
	display: inline;
	float: none;
	background-image: none;
	text-align: inherit;
	text-decoration: inherit;
}

.artmenu ul a, .artmenu ul a:link, .artmenu ul a:visited, .artmenu ul a:hover, .artmenu ul a:active, .nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
	text-align: left;
	text-decoration: none;
	line-height: 20px;
	color: #21160D;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 13px;
}

.artmenu ul ul a
{
	margin-left: -3px;
}

.artmenu ul li a:hover
{
	color: #c33f3b;
	background-position: 0 -20px;
}

.artmenu ul li:hover>a
{
	color: #c33f3b;
	background-position: 0 -20px;
}

.nav .artmenu ul li a:hover span, .nav .artmenu ul li a:hover span span
{
	color: #c33f3b;
}

.nav .artmenu ul li:hover>a span, .nav .artmenu ul li:hover>a span span
{
	color: #c33f3b;
}


/* end MenuSubItem */