Javascript-форум - меню на CSS не работает в IE

я собрал менюшку чисто на CSS,
html---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="tpl.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>

<body>
<ul class="m">
		<li><a href="#">Item 1</a>
				<ul>
					<li><a href="#">Item 1.1</a></li>
					<li><a href="#">Item 1.2</a></li>
					<li><a href="#">Item 1.3</a></li>
					<li><a href="#">Item 1.4</a></li>
				</ul>
		</li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a>
				<ul>
					<li><a href="#">Item 3.1</a>
							<ul>
								<li><a href="#">Item 3.1.1</a></li>
								<li><a href="#">Item 3.1.2</a></li>
								<li><a href="#">Item 3.1.3</a></li>
							</ul>
					</li>
					<li><a href="#">Item 3.2</a></li>
					<li><a href="#">Item 3.3</a></li>
					<li><a href="#">Item 3.4</a></li>
				</ul>
		</li>
		<li><a href="#">Item4</a>
				<ul>
					<li><a href="#">Item 4.1</a>
							<ul>
								<li><a href="#">Item 4.1.1</a></li>
								<li><a href="#">Item 4.1.2</a></li>
								<li><a href="#">Item 4.1.3</a></li>
							</ul>
					</li>
					<li><a href="#">Item 4.2</a></li>
					<li><a href="#">Item 4.3</a></li>
					<li><a href="#">Item 4.4</a>
							<ul>
								<li><a href="#">Item 4.4.1</a></li>
								<li><a href="#">Item 4.4.2</a></li>
								<li><a href="#">Item 4.4.3</a></li>
							</ul>
					</li>
				</ul>
		</li>
	</ul>
</body>
</html>

css----

Код:

ul.m{margin:0;padding:0;list-style-type:none;font-size:100%;cursor:default;width:auto;}

ul.m li{margin:0;padding:0;list-style-type:none;font-size:100%;position:relative;text-align:left;cursor:pointer;width:8em;float:left;}

ul.m ul{margin:0;padding:0;list-style-type:none;font-size:100%;z-index:1020;cursor:default;width:8.2em;position:absolute;left:-1000em;border:1px solid #CCC;}

ul.m li:hover ul, ul.m li:focus ul{left:auto;}

ul.m li:hover ul ul, ul.m li:focus ul ul{left:-1000em;}

ul.m ul:hover, ul.m ul:focus{left:auto;}

ul.m ul li{width:8.2em;}

ul.m ul ul{position:absolute;margin:0 0 0 99%; top:0;}

ul.m ul:hover ul{left:-1000em;}

ul.m ul li:hover ul{left:auto;}

ul.m a{display:block;cursor:pointer;background-color:#EEE; padding:5px 10px;color:#333;text-decoration:none;}

ul.m a:hover,ul.m a:focus{background-color:#33C;color:#FFF;}

эта штука работает во всех новых броузерах кроме IE,
скажите что лучше написать какую нибуть JS,
или что то придумать в CSS для IE,
и главное как это сделать.