CSS drop-down & IE7 ..

I’m pulling my hair out over this.

IE7 is chewing up my CSS drop-down menu. It displays fine in Firefox, Safari and the like. And in IE6 it doesn’t work at all–which is fine, I can deal with that for now.

But in IE7 the sub-menu aligns to the far right of the top-level item (versus centered beneath it, like it should be) and makes the menu unusable. The only way I found to alter where the sub-menu is displayed in IE7 is to set a negative margin-left on “.cssfly ul li:hover ul,” but that screws up the menu in all the other browsers.

Any ideas?

The site is bigmuddyrecords.com.

Here is the CSS for the menu:

.cssfly {
	font-family: arial, verdana, helvetica, sans-serif;
	/* width:101px; */
	height:150px;
	position:relative;
	margin: auto;
	font-size:11px;
	height: 19px;
}

.cssfly ul li a, .menu ul li a:visited {
	display:inline;
	position: relative;
	text-decoration: none;
	color: #000;
	margin-left: 25px;
	border-width: 0px 0px 0 0;
	background: #000000;
	color:#561313;
	line-height:19px;
	font-size:15px;
}

.cssfly ul {
	padding:0;
	margin:0;
	list-style-type: none;
	display: inline;
	position: relative;
	float: left;
}

.cssfly ul li {
	float: left;
	margin-right: 1px;
	position: relative;
}

.cssfly ul li ul {display: none;}

.cssfly ul li:hover a {color:#e80000; background:#000;}
.cssfly ul li:hover ul {
	display: block;
	position: absolute;
	top: 19px;
	margin: auto;
	width:84px;
	border-top: 0px solid #561313;
	border-bottom: 9px solid #561313;
}

.cssfly ul li:hover ul li a.hide {
	background:#561313;
	color:#000;
}

.cssfly ul li:hover ul li:hover a.hide {width:80px;}
.cssfly ul li:hover ul li ul {display: none;}
.cssfly ul li:hover ul li a {
	display:block;
	background:#000;
	color:#561313;
	width:72px;
	font-size: 11px;
	line-height: 12px;
	padding: 3px;
	font-weight: bold;
	border: 3px solid #561313;
	border-top: 0px;
	border-bottom: 1px solid #561313;
	margin-left: 0px;
	top: 7px;
	z-index: 1000;
}

The HTML:

<div class="cssfly" style="margin-left: 25px;">
	<ul>
	     <li>
		<a href="/">Home</a>
	     </li>
	     <li>
		<?php wp_list_pages('title_li=&depth=2'); ?>
	     </li>
	</ul>
</div>