CSS - Need Help With Javascript Dropdown And Css

#menu ul { 
position: relative;
margin: 8em 0 0 0;
float: left; 
background-color: #D60078;
list-style-type: none;
}

#menu li 	{ 
display: inline; 
padding: 0 2.5em 0 0;
position: relative; 
}

#menu li a:link, a:visited { 
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
}

#menu li a:hover, a:active 	{ 
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
}

#menu li ul { position: absolute; 
left: 0; top: 0; 
background-color: #FFF;
display: block; 
} 

<ul id="menu">
<li><a href="">ITEM1</a>
<!-- SUBMENU -->
<ul>
<li><a href="">subitem1</a></li>
<li><a href="">subitem2</a></li>
<li><a href="">subitem3</a></li>
</ul>
</li>

<li><a href="">ITEM2</a>
<!-- SUBMENU -->
<ul>
<li><a href="">subitem1</a></li>
<li><a href="">subitem2</a></li>
<li><a href="">subitem3</a></li>
</ul>
</li>

</ul>

Ex:
[Link1][Link2][Link3]  *with the mouse over the link 1

|Url1      |
|Url2      |
|Much Longer|

instead of

[Link1][Link2][Link3]  *with the mouse over the link 1
|Url1 |
|Url2 |
|Much|
|Longer|

#nav ul {
margin: 0 0;
padding: 0 0;
list-style-type: none;
}

#nav ul li {
float: left;
position: relative;
width: 10em;
}

#nav ul li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}

#nav ul li > ul {
top: auto;
left: auto;
clear: left; 
}

#nav ul li:hover ul, #nav ul li.over ul {
display: block;
}

<div id="nav"><ul id="rootul">
<li><a href="#">Link One</a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
<li><a href="#">Link Two </a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
<li><a href="#">Link Three </a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
<li><a href="#">Link Four </a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
<li><a href="#">Link Five </a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
</ul>
</div>

<script language="javascript" type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("rootul");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>

#suckerfishnav,
#suckerfishnav ul {
  float: left;
  height: 2.98em;
  width: 960px;
  list-style: none;
  line-height: 1;
  background: white;
  font-weight: bold;
  margin: 0.1em 0.1em 0.1em 0.1em;
  padding: 0;
}

#suckerfishnav a {
  display: block;
  color: #7c6240;
  text-decoration: none;
  padding-top: 0.25em;
  padding-right: 0.7em;
  padding-bottom: 0.1em;
  padding-left: 0.2em;
}

#suckerfishnav li {
  float: left;
  padding: 0;
  width: 13em;
  height: 2.8em;
}

#suckerfishnav ul {
  position: absolute;
  left: -999em;
  height: auto;
  margin-left: 2em;
  line-height: 1;
  z-index: 500;
}

#suckerfishnav li li {
  width: 9.6em;
  border: solid #eda;
  border-width: 1px;
  padding-top;
  10px;
}

#suckerfishnav li ul a {
  width: 9.8em;
}

#suckerfishnav li ul ul {
  margin: -0.20em 0 0 9.8em;
}

#suckerfishnav li ul {
  position: absolute;
  left: -999em;
  height: auto;
  width: 9.9em;
  w\idth: 9.8em;
  font-weight: normal;
  border-width: 0.20em;
  margin: 0;
  z-index: 500;
}

#suckerfishnav li ul a {
  width: 9.9em;
  w\idth: 9.8em;
}

#suckerfishnav li:hover ul ul,
#suckerfishnav li:hover ul ul ul,
#suckerfishnav li.sfhover ul ul,
#suckerfishnav li.sfhover ul ul ul {
  left: -999em;
}

#suckerfishnav li:hover ul,
#suckerfishnav li li:hover ul,
#suckerfishnav li li li:hover ul,
#suckerfishnav li.sfhover ul,
#suckerfishnav li li.sfhover ul,
#suckerfishnav li li li.sfhover ul {
  left: auto;
}

#suckerfishnav li:hover,
#suckerfishnav li.sfhover {
  background: #eda;
  width: 9.5em;
  w\idth: 9.4em;
}

http://dfinnema.com/help

http://dfinnema.com/help/images/dropdown_active.png

http://dfinnema.com/help/images/dropdown.png

<div id="wrap">
		<ul id="navbar">
		<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
			<li><a href="#"><IMG SRC="d_images/navigation_01.gif" border="0"></a>
			</li>
			<li><a href="#"><IMG SRC="d_images/navigation_02.gif" border="0"></a>
				<ul>
				<li><a href="summit_09registration.cfm">Register</a></li><li>
				<a href="summit_09scholarship.cfm">Scholarships</a></li></ul>


			<li><a href="#"><IMG SRC="d_images/navigation_03.gif" border="0"></a>
				<ul>
					<li><a href="summit_09awards.cfm">Leadership Awards</a></li><li>
					<a href="summit_09party.cfm">Anniversary Party</a></li><li>
					<a href="summit_09work.cfm">Work Project</a></li><li>
					<a href="summit_09dine.cfm">Dine Arounds</a></li><li>
					<a href="summit_09jazz.cfm">Jazz Fesitval</a></li><li>
					<a href="summit_09networking.cfm">Networking</a></li></ul>
					</li>
			<li><a href="#"><IMG SRC="d_images/navigation_04.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

			<li><a href="#"><IMG SRC="d_images/navigation_05.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

			<li><a href="#"><IMG SRC="d_images/navigation_06.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

	<li><a href="#"><IMG SRC="d_images/navigation_07.gif" border="0"></a>
				<ul>
					<li><a href="summit_09hotel.cfm">Conference Hotel</a></li><li>
					<a href="summit_09travel.cfm">Travel</a></li><li>
					<a href="summit_09neworleans.cfm">New Orleans</a></li></ul>
			</li>



</ul></div>

<style type="text/css">

#navbar {
	margin: 0;
	padding: 0;
	height: 0;}
#navbar li {
	list-style: none;
	float: left; }
#navbar li a {
	display: block;
	padding-bottom:0px;
	padding-left: 0px;
	padding-right:0px;
	padding-top:0px;
	border: 0px;
	color: #fff;
	font-family: helvetica;
	font-size: 8pt;
	font-style: bold;
	font-color: #ffffff;
	text-decoration: none;}
#navbar li ul {
	display: none;
	width: 10em; /* Width to help Opera out */
	background-image: url(../images/summit_nav_back.gif);}

#navbar li:hover ul, #navbar li.hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }
#navbar li:hover li, #navbar li.hover li {
	float: none; }
#navbar li:hover li a, #navbar li.hover li a {
	background-image: url(../images/summit_nav_back.gif);
	border-bottom: 1px solid #fff;
	color: #000; }
#navbar li li a:hover {
	background-image: url(../images/summit_nav_red.gif); }
</style>


<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
	var sfEls = document.getElementById("navbar").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" hover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" hover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>