CSS multi level drop downs

[windows]

Hi

Many of you have probably come across Sukerfishes multi level drop downs. They are fantastic for use on PC browsers, but as soon as they are used on the Mac they fall over.

I am wondering if anyone can help with a solution to this as it is driving me up the wall!

JAVASCRIPT

<script type="text/javascript" language="javascript">

<!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>

</script>

CSS

#nav, #nav ul {padding: 0;margin: 0; list-style: none; line-height: 1;}
#nav a { width:100%; height:18px; padding-top:5px; display: block; color:#fff; font-weight:bold; text-align:center; text-decoration:none; }
#nav a:hover { background:#00341c; }

#nav li#nav1 a:hover { background:#999;}
#nav li#nav2 a:hover { background:#063;}
#nav li#nav3 a:hover { background:#330;}

#nav li#nav1 a#Selected { background:#999;}
#nav li#nav2 a#Selected { background:#063;}
#nav li#nav3 a#Selected { background:#330;}

#nav li { float:left; width: 97px; position:relative; background:#bd9c10; }
#nav li#nav1{ width:100px; }
#nav li ul { position: absolute; left: -999em; }
#nav li ul li { width:185px; float:left; }
#nav li ul li a { width:175px; padding-left:10px; text-align:left; }
#nav li:hover ul, #nav li.sfhover ul { left: auto; }

#nav li ul ul { width:185px; top:0; margin:0; }
#nav li ul ul.rightalign { margin-left:185px; }
#nav li ul ul.leftalign { margin-left:-185px; }
#nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto; }

HTML

<ul id="nav">
<li id="nav1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="Selected">Conferences</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Conferences 0</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Conferences 1</a>
<ul class="rightalign">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Conferences 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Conferences 4</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Conferences 2</a></li>
</ul>
</li>
<li id="nav2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Banqueting</a></li>
<li id="nav3"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Weddings</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Menu & Wine</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Travel</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">News</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Links</a></li>
</ul>

If any one can help woth this that would be great.

Thanking you in advance.