Hi,
I have problem with my "suckerfish" nav menu. because it is warp inside div I could not see the sub menus. could any one help me :(

HTML Code:
<div id="nav-bar">
    <ul id="nav">
		<li><a href="index.html">Home</a></li>
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="#">Why Auction</a>
        	<ul>
                 <li><a href="Commercial.html">Commercial</a></li>
        		 <li><a href="Residential.html">Residential</a></li>
        		 <li><a href="Recreational.html">Recreational</a></li>
        	</ul>
           </li>

        <li><a href="CurrentAuctions.html">Current Auctions</a></li>      
        <li><a href="ContactUs.html">Contact Us</a></li>
    </ul>   
</div> <!--End of nav-bar  -->
Style
#nav-bar
{
background:#032d47;
background:url(../images/nav_bg.png);
position:relative;
overflow:hidden;
height:70px;
text-align:center;

}

#nav-bar ul
{
margin-top:10px;
margin-bottom:10px;
padding-left:10px;
font-family:Arial, Helvetica, sans-serif;

}

#nav-bar li
{
float:left;
list-style:none;
}
#nav li ul
{
position:absolute;
width: 10em;
left:-999em;
padding:0;
margin:0;
}
#nav-bar li a
{
color:white;
width:100%;
position:relative;
font-size:18px;
text-decoration:none;
padding-left:6px;
padding-right:15px;
border-right: 1px solid black;
}


#nav-bar li:last-child a
{
border-right:none;
}

#nav-bar li:visited
{
background: #071A71;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Code JavaScript:
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);