suckerfish dropdown menus

I am trying to get the suckerfish navigation to work. Here is the code that I’m using.

XHTML/PHP

<ul id="nav">
<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&title_li=&depth=2')); ?>
</ul>
<!--/nav--></div>

The reason for
‘@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i’, ‘<li$1><a$2><span>$3</span>’
is to make the sliding door effect work in WP, it doesn’t have anything to do with the suckerfish.

JavaScript

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>

CSS

#nav ul { /* all lists */
	padding:0 15px;
	margin: 0;
	list-style: none;
	display:block;
	margin:0 10px;
}

#nav li { /* all list items */ /*transform the first-level list into a horizontal menu bar by floaing them to the left. The position has been set to relative because we want the position of the second-level, nested lists to be relative to the first-level list items and the width has been set to space it out a bit. The dropdown menu is coming together.*/
	float: left;
	position: relative;
	width: 10em;
	list-style: none;
	}

#nav li a {
			display:block;
			float:left;
			color:#FFFFFF;
			line-height:48px;
			padding:0 0 0 12px;
			text-decoration:none;
			cursor:pointer;
			}
		#nav li a span{
			display:block;
			float:left;
			color:#FFFFFF;
			line-height:48px;
			padding:0 24px 0 10px;
			}
		#nav li a:hover {
			display:block;
			float:left;
			background:url(images/nav/nav_h_l.png) no-repeat left center;
			}
		#nav li a:hover span{
			display:block;
			float:left;
			background:url(images/nav/nav_h_r.png) no-repeat right center;
			color:#FFFFFF;
			height:48px;
			}
		#nav li a.current{
			display:block;
			float:left;
			color:#FFFFFF;
			background:url(images/nav/nav_h_l.png) no-repeat left center;
			line-height:28px;
			padding:0 0 0 12px;
			text-decoration:none;
			}
		#nav li a.current span{
			display:block;
			float:left;
			background:url(images/nav/nav_h_r.png) no-repeat right center;
			color:#FFFFFF;
			line-height:48px;
			padding:0 24px 0 10px;
			}

#nav li ul { /* second-level lists */ /*This positions the second-level lists absolutely (pulling them out of the flow of HTML into a world all of their own) and sets their initial state to not be displayed.*/
	display: none;
	position: absolute;
	background:  url(images/nav/subnav_bg.png) ;
}

#nav li > ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
}

	#nav li ul a{
				list-style:none;
				display:block;
				font-weight:bold;
				text-decoration:none;
				color: #504f48;
				padding: 0px/*top*/ 10px/*right*/ 0px/*bottom*/10px/*left*/;
				}
					#nav li ul a:hover{
						background: url(images/sub_nav_over.png);
						color: #504f48;
						text-decoration:underline;
					}
				#nav li ul .current{
					list-style:none;
					display:block;
					background: url(images/sub_nav_down.png) repeat-x left;
					color:#000;
					text-decoration:none;

				}
					#nav li ul a.current, #nav li a:hover.current{
						background: url(images/sub_nav_down.png) repeat-x left;
						color: #504f48;
						text-decoration:none;
					}		

#nav li:hover ul, li.over ul { /* lists nested under hovered list items */
	display: block;
/*	position:absolute;*/
	top:50px;
}

It works in straight HTML using

<ul id="nav">
		<li><a href="#" class="current"><span>Home</span></a>
        <ul>
        		<li><a href="" class="sub">subnavigation</a></li>
				<li><a href="" class="sub">subnavigation</a></li>
				<li><a href="" class="sub">subnavigation</a></li>
        </ul>
        </li>
		<li><a href="#"><span>About us</span></a></li>
		<li><a href="#"><span>Services</span></a></li>
		<li><a href="#"><span>Solutions</span></a></li>
		<li><a href="#"><span>Contact us</span></a></li>
	</ul>

So I think that I just need the proper php to call the subpages.

Any help would be super appreciated!