Son of Suckerfish dropdown Problem.

[ryy705]

Hello,

Please take a look at :http://artduffieldrealty.webmaxsites.com/
The site works fine in IE8 and FF3.5

But I am having trouble with the menu in IE7. I made the mistake of not testing the site in IE7 as I was putting it together.

If you hover over a menu item, the drop down does not line up with the parent element in IE7. Has this happened to anyone before?
(please use IE Tester if you do not have IE7 installed)

Son of Suckerfish simply hides the drop down with left: -9999 and brings it back with left:auto;
I know this method works fine in IE7. Did I screw up some padding or margin somewhere?

I have spent substantial amount of time with this. But I am unable to figure it out. Please Please help.

I am pasting the css file for navigation for your covenience:

#nav {
	overflow: hidden;
	height: 30px;
	background-color: #CA0000;
	border-top: 3px solid #000;
	border-bottom: 3px solid #000;
}
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
	text-decoration: none;
	font-size: 11px;
}

#nav li { /* all list items */
	
	font-family: "Verdana Bold";
	font-weight: bold;
	float: left;
	line-height: 30px;
	text-align: center;
	width: 80px; /* width needed or else Opera goes nuts */
}
#nav li a {
	color: #FFF;
	margin:0;
	padding-left: 0px;
	padding-right: 0px;
}
#nav li li a,#nav li li li a{
	color: #000;
}
#nav li li a {
	border-left: 1px solid #CA0000;
	border-right: 1px solid #CA0000;
	border-bottom: 1px solid #CA0000;
	border-top: 1px solid #CA0000;
	padding-left: 3px;
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: #EFEFEF;
	width: 115px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li ul :hover { 
  background: #FFF;
}

#nav li ul li, #nav li ul li ul li{ /* second & third -level lists */
	line-height: 15px;
	text-align: left;
}
#nav li ul ul { /* third-and-above-level lists */
	margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

[ko ko]

Check your mail list tag

<li>

, it has

text-align: center

property. It can move all child element to center. If you want to main menu text to center, you may give

<a>

element to text align property. But, notice that it will apply all text in anchor tag. Let try this:

#nav li a {
text-align: center }
#nav li:hover ul a {
text-align: left }

It will work.
Sorry for bad English skill.