Two level dropdown menu

I am trying to recreate an existing javascript dropdown menu in css. (OG: http://www.ormco.com/damon/index.cfm) I am having a hard time positioning the Second level navigation. There are two key factors here, #1 the entire buttons must be active, and each button varies in width but not in height. Secondly each dropdown link must be clickable, including the space not occupied by text.

Here is the url: http://www.kennethking.com/_private/Damon/template.php

thank you,
Kenneth

Here is my css code:

* { margin: 0; padding: 0;}
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%;}
#container { width: 720px;}
#masthead { height: 71px; width: 720px;}
#masthead img { border: none; float: left;}
span { display: none;}

#menu li.system { background: url(http://www.kennethking.com/_private/Damon/images/thesystemNew.jpg); cursor: pointer; height: 71px; width: 108px;}
#menu li.clinic { background: url(http://www.kennethking.com/_private/Damon/images/intheclinicNew.jpg); cursor: pointer; height: 71px; width: 102px;}
#menu li.seminars { background: url(http://www.kennethking.com/_private/Damon/images/seminars.jpg); cursor: pointer; height: 71px; width: 82px;}
#menu li.publications { background: url(http://www.kennethking.com/_private/Damon/images/publications.jpg); cursor: pointer; height: 71px; width: 104px;}

/* Second Level Dropdowns
------------------------------------------------------ */
#menu li { float: left; list-style: none;}
#menu li ul { background-color: #d5e6f0; border: 1px solid #000; border-bottom: none; font-size: 1.2em; left: -999em;  position: absolute; top: 70px; }
/*#menu li:hover ul, #menu li.sfhover ul { left: auto; }*/
#menu li li { float: none;}
#menu li a { display: block; padding: 5px 0 3px; text-align: left;}
#menu li li a { padding: 4px;}
#menu li a:link, #menu li a:visited { background-color: transparent; border-bottom: 1px solid #000; color: #666; text-decoration: none;}
#menu li a:hover { background: #1468a6; color: #fff; text-decoration: none;}

/* Second Level Dropdowns
------------------------------------------------------ */
#menu li ul ul { margin: -1em 0 0 10em;}
#menu, #menu ul { list-style: none; line-height: 1;}
#menu li:hover ul ul, #menu li.sfhover ul ul { left: -999em; font-size: 1em;}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { left: auto;}
 

Sucker Fish Javascript:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("menu").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>

HTML:

<div id="container">
	<div id="masthead">
	    <a href="#"><img src="http://www.kennethking.com/_private/Damon/images/01logoNew.jpg" alt="Damon System" /></a>
		<h1><span>Damon System</span>
		  <ul id="menu">
			<li class="system"><span><a href="#" rel="nofollow">The System</a></span>
			  <ul>
				<li><a href="#" rel="nofollow">Home</a></li>
					<li><a href="#" rel="nofollow">Damon 3</a></li>
					<li><a href="#" rel="nofollow">Damon 2</a></li>
					<li><a href="#" rel="nofollow">New Products</a></li>
					<li><a href="#" rel="nofollow">Philosophy</a></li>
					<li><a href="#" rel="nofollow">Passive Self Ligation</a></li>
					<li><a href="#" rel="nofollow">Ask Dr. Damon (FAQs)</a></li>
			  </ul>
			</li>
				<li class="clinic"><span><a href="#" rel="nofollow">In The Clinic</a></span>
				  <ul>
					<li><a href="#" rel="nofollow">Case Studies</a>
					  <ul>
						<li><a href="#" rel="nofollow">Adult Class II Cases</a></li>
						<li><a href="#" rel="nofollow">Crowded Cases</a></li>
						<li><a href="#" rel="nofollow">Elastics</a></li>
						<li><a href="#" rel="nofollow">Extraction Cases</a></li>
						<li><a href="#" rel="nofollow">Herbst®* Cases</a></li>
					  </ul>
					</li>
					<li><a href="#" rel="nofollow">Damon Glossary</a></li>
					<li><a href="#" rel="nofollow">Bondaing Procedure</a></li>
					<li><a href="#" rel="nofollow">System Archwire Sequencing</a></li>
					<li><a href="#" rel="nofollow">Selective Torques</a></li>
				  </ul>
				</li>
			<li class="seminars"><span><a href="#" rel="nofollow">Seminars</a></span>
			  <ul>
				<li><a href="#" rel="nofollow">The Damon Forum</a></li>
					<li><a href="#" rel="nofollow">Seminar Description</a></li>
					<li><a href="#" rel="nofollow">Seminar Schedule and Registration</a></li>
					<li><a href="#" rel="nofollow">Study Clubs</a></li>
					<li><a href="#" rel="nofollow">Damon Implementation Courses</a></li>
			  </ul>
			</li>
				<li class="publications"><span><a href="#" rel="nofollow">Publications</a></span>
				  <ul>
					<li><a href="#" rel="nofollow">Clinical Abstracts</a></li>
					<li><a href="#" rel="nofollow">Damon Quick Start</a></li>
					<li><a href="#" rel="nofollow">Fast Track</a></li>
					<li><a href="#" rel="nofollow">Clinical Impressions</a></li>
					<li><a href="#" rel="nofollow">Damon Updates</a></li>
				  </ul>
				</li>
		</ul>
	</div>
</div>