sub navigation not working in ie6

[boognish]

I have an issue in ie5 and ie6 with my sub navigation, it doesn't appear like it does in safari and firefox....

http://histrionicstheplay.co.uk/home.html

Can anyone see how I can fix this?

    <div class="menu">
      <ul id="nav">
        <li><a href="home.html">Home</a></li>
        <li><a href="page2.htm">Story</a>
          <ul>
            <li><a href="page13.htm">Wolfio Pigram</a></li>
            <li><a href="page14.htm">Nimbus Pigram</a></li>
            <li><a href="page15.htm">Furtive Grange</a></li>
            <li><a href="page16.htm">Rolf</a></li>
            <li><a href="page17.htm">Crimbo</a></li>
            <li><a href="page18.htm">Vole</a></li>
            <li><a href="page19.htm">The Judge</a></li>
          </ul>
        </li>
        <li><a href="page3.htm">History</a>
          <ul>
            <li><a href="page11.htm">Coffeehouses</a></li>
            <li><a href="page12.htm">Commedia Dell'Arte</a></li>
            <li><a href="page21.htm">The 17th Century Actress</a></li>
          </ul>
        </li>
        <li><a href="page4.htm">Players</a>
          <ul>
            <li><a href="page22.htm">Christopher Niederberger</a></li>
            <li><a href="page23.htm">Daniela Finley</a></li>
            <li><a href="page24.htm">Paul L Martin</a></li>
            <li><a href="page25.htm">Brendan Wyer</a></li>
            <li><a href="page26.htm">David Shuker</a></li>
            <li><a href="page27.htm">Sean Garvey</a></li>
</ul>
        </li>        
	<li><a href="page5.htm">In Pictures</a></li>
        <li><a href="page6.htm">The Courier</a></li>
        <li><a href="page7.htm">Buy Tickets</a></li>
        <li><a href="page20.htm">Writer</a></li>
        <li><a href="page28.htm">Director</a></li>
        <li><a href="page29.htm">Lutist</a></li>
      </ul>
    </div>

#nav, #nav ul { /* all lists */
		padding: 0;
		margin: 0;
		list-style: none;
		float : left;
		width : 10em;
		z-index:2000;
	}
	
	#nav li { /* all list items */
		position : relative;
		float : left;
		line-height : 1.25em;
		margin-bottom : -1px;
		width: 10em;
	}
	
	#nav li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 10em;
		margin-top : -1.35em;
	}
	
	#nav li ul ul { /* third-and-above-level lists */
		left: -999em;
	}
	
	#nav li a {
		width: 10em;
		w\idth : 10em;
		display : block;
		color : black;
		font-weight : bold;
		text-decoration : none;
		background-color : white;
		border : 1px solid black;
		padding : 0 0.5em;
	}
	
	#nav li a:hover {
		color : white;
		background-color : black;
	}
	
	#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;
	}

[Centauri]

The suckerfish javascript required to dynamically apply the "sfhover" class for IE6 is missing.. http://www.htmldog.com/articles/suckerfish/