Cross Browser CSS Dropdown

dropdown.css

.dropdown, .dropdown ul{padding:0;margin:0;list-style:none}
.dropdown li{float:left;width:10em}
.dropdown li ul{position:absolute;width:10em;left:-999em}
.dropdown li:hover ul{left:auto}
.dropdown li:hover ul, .dropdown li.hover ul{left:auto}
.dropdown li ul ul{margin:-2em 0 0 10em}
.dropdown, .dropdown ul{padding:0;margin:0;list-style:none;line-height:1}
.dropdown li:hover ul ul, .dropdown li.hover ul ul{left:-999em}
.dropdown li:hover ul ul, .dropdown li:hover ul ul ul, .dropdown li.hover ul ul, .dropdown li.hover ul ul ul{left:-999em}
.dropdown li:hover ul, .dropdown li li:hover ul, .dropdown li li li:hover ul, .dropdown li.hover ul, .dropdown li li.hover ul, .dropdown li li li.hover ul{left:auto}
.dropdown li:hover ul ul, .dropdown li:hover ul ul ul, .dropdown li:hover ul ul ul ul, .dropdown li.hover ul ul, .dropdown li.hover ul ul ul, .dropdown li.hover ul ul ul ul{left:-999em}
.dropdown li:hover ul, .dropdown li li:hover ul, .dropdown li li li:hover ul, .dropdown li li li li:hover ul, .dropdown li.hover ul, .dropdown li li.hover ul, .dropdown li li li.hover ul, .dropdown li li li li.hover ul{left:auto}
/* LINK STYLE */
.dropdown a{display:block;width:8em;padding:.5em 1em;background:#333;color:#FFF;font-weight:bold;text-decoration:none}
.dropdown a:hover{color:#333;background:#AAA}

dropdown.html

<style type="text/css">@import url("dropdown.css");</style>
<ul id="nav" class="dropdown">
	<li><a href="#">Link 1</a></li>
	<li>
		<a href="#">Link 2</a>
		<ul>
			<li><a href="#">Link 2.1</a></li>
			<li><a href="#">Link 2.2</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Link 3</a>
		<ul>
			<li><a href="#">Link 3.1</a></li>
			<li>
				<a href="#">Link 3.2</a>
				<ul>
					<li><a href="#">Link 3.2.1</a>
					<li><a href="#">Link 3.2.2</a>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Link 4</a></li>
</ul>
<!--[if lte IE 6]><script type="text/javsacript" src="dropdown.js"></script><![endif]-->

dropdown.js

// This is required for IE 6 and lower, since they do not support the :hover sudo class on li tags
function dropdown() {
	var ele = document.getElementById("nav").getElementsByTagName("li");
	for (var i=0; i<ele.length; i++) {
		ele[i].onmouseover=function() {
			this.className+=" hover";
		}
		ele[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" hover\\b"), "");
		}
	}
}
// IE specific attach method
if (window.attachEvent) window.attachEvent("onload", dropdown);