Positioning sub menu

[mrtblt]

Here is my css code for the menu

#menu
{
	position: relative;
	z-index: 2;
	height: 2.5em;
	margin-top: 1px;
	border-right: 1px solid #003399;
	border-bottom: 1px solid #003399;
	background-color: #0066CC;
	background-image: url("images/px_3399ff.gif");
	background-repeat: repeat-x;
}

* html #menu
{
	height: 2.35em;
}

#menu ul
{
	float: left;
	border-right: 1px solid #3399FF;
	list-style: none;
}

#menu li
{
	float: left;
	position: relative;
}

#menu a
{
	display: block;
	border-top: 1px solid #3399FF;
	border-left: 1px solid #3399FF;
	border-right: 1px solid #003399;
	border-left: 1px solid #3399FF;
	padding: 0.5em 16px;
	color: #FFFFFF;
	text-decoration: none;
}

* html #menu a
{
	height: 1px;
	float: left;
}

#menu li.on a
{
	border-top-color: #197FE5;
	border-left-color: #197FE5;
	color: #FFCC00;
	background-color: #004CB2;
	font-weight: bold;
}

#menu a:hover
{
	background-color: #004CB2;
}


#menu li ul { /* second-level lists */
	position: absolute;
	background: #3197FD;
	width: 15.5em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	top: 2.35em;
}

#menu li ul  a
{
	border-top: 1px solid #0167CD;
	border-bottom: none;
	border-right: none;
	border-left: none;
	width: 13em;
}

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


#menu li ul ul { /* third-and-above-level lists */
	margin: -2em 0 0 15.5em;
}

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

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

#menu li  li  ul a
{
	border-top: 1px solid #0167CD;
	border-bottom: none;
	border-right:none ;
	border-left: none;
	width: 13em;
	color : white;
	background:#8FC7FF;
}

I create dropdown navigating menus by a supplementary javascript code.

It third level menus work fine on ie7 and firefox.
But when it comes to ie6, submenu appears below the main menu item right next to the one the it belongs to.

How i can resolve this problem?

You can see the site that i am working on from this link : http://www.kumyapi.com.tr/

[Centauri]

Use left:0 instead of auto :

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