Suckerfish Two Level Menu Problem

[Abunada]

I wanted to create a suckerfish style menu for my site, I wanted it to have two levels, I followed the tutorial http://htmldog.com/articles/suckerfish/dropdowns/, and modified it to suit my website's styling. Also I modified the menu so that the width of the menu items are auto (as wide as the widest element in the list) but a problem arose. The tutorial gives the second level menu a top and left margin so that it is positioned next to its parent link. Now that the width of the parent menu is no longer constant, I cant use this technique. Can anyone tell me how do I go about positioning the second level menu next to its parent without the need for knowing its width. The menu HTML and CSS is listed below

If you want to see a live preview its at http://www.eratronics.net/

Menu HTML

          <div id="nav">
		<ul>
			<li id="current"><a href="index.html">Home</a></li>
			<li><a href="index.html">About</a>
				<ul>
					<li><a href="index.html">About Me</a></li>
					<li><a href="index.html">About Us</a></li>
				</ul>
			</li>
			<li><a href="index.html">Tutorials</a>
				<ul>
					<li><a href="index.html">Electronics</a>
					<ul>
						<li><a href="index.html">Basic Ans Some Other Long Word</a></li>
						<li><a href="index.html">Advanced</a></li>
					</ul>
					</li>
					<li><a href="index.html">Microcontrollers</a></li>
					<li><a href="index.html">Lab Skills</a></li>
				</ul>
			</li>
			<li><a href="index.html">Projects</a>
				<ul>
					<li><a href="index.html">Fixed</a></li>
					<li><a href="index.html">User Submitted</a></li>
				</ul>
			</li>
			<li><a href="index.html">Forums</a></li>
			<li><a href="index.html">Contact</a></li>		
		</ul>
	</div>

Menu CSS

#nav 
{
    margin: 0;
    padding: 0;
    width: auto;
}

#nav ul 
{
    list-style: none;	
    width: 870px;		
    height: 45px;
    margin: 0 0 0 15px;
    padding: 0;	
    background: url(../images/nav.jpg) repeat-x;
    ine-height: 1;
}

#nav ul li 
{
    float: left;
}

#nav ul li a 
{
    display: block;
    margin: 0;
    padding: 0 11px;
    border-right: 1px solid #899D00;
    border-left: 1px solid #A7D101;
    font: bold 14px/45px Verdana, Tahoma;
    text-decoration: none;	
    color: #fff;
    background: url(../images/nav.jpg) repeat-x;
}

#nav ul li a:hover, 
#nav ul li a:active 
{
    background: url(../images/nav-hover.jpg) repeat-x;	
}

#nav ul li#current a 
{	
    background: url(../images/nav-current.jpg) repeat-x;	
}

#nav ul li ul
{
    position: absolute;
    z-index: 1000;
    left: -1000em;
    margin-left: 0px;
    width: auto;
}

#nav ul li:hover ul
{
    left: auto;
}

#nav ul li ul li
{
    float: none;
}

#nav ul li ul li ul 
{
    margin: -45px 0 0 10em;
}

#nav li:hover ul ul
{
    left: -1000em;
}

#nav li li:hover ul
{
    left: auto;
} 

#nav ul li ul li ul li
{
	position: relative;
        white-space: nowrap;
}

Thanks a million! Any help appreciated.

[Abunada]

Please guys, not even a useful link!