I cobbled together a horizontal nav menu from list-o-matic (and the advice of some kind webdeveloper.com members) which works wonderfully (see http://www.kitchenprose.com/gmtest/index.html )


However, now I need to add drop-down capability to it and I fouled it up so badly that it was suggested I start from scratch using one of the suckerfish menus (http://www.htmldog.com/articles/suckerfish/dropdowns/)

I plugged the menu into a test page then gradually added various style elements to it but sadly cannot seem to get the spacing correct. The first 3 links work fine but the rest of the links crowd left and overtop of one another instead of being evenly centered and spaced out across the 914px container.

Any ideas what I am doing wrong? What element is controlling the spacing? (I've experimented with all sorts of spacing ... none of it works).


Here's the link to my test page: http://www.kitchenprose.com/index-test.html

Here is the pertinent code:

HTML
Code:
<div id="navcontainer">


	<ul id="nav">
	<li><a href="#">HOME</a></li>
	<li><a href="#">NEWS</a>
		<ul>
			<li><a href="#">HEADLINES</a></li>
			<li><a href="#">APPEARANCES</a></li>
		</ul>
	</li>
	<li><a href="#">ABOUT</a></li>    
	<li><a href="#">GALLERY</a>
		<ul>
			<li><a href="#">PHOTO</a></li>
			<li><a href="#">VIDEO</a></li>
		</ul>
        </li>
	<li><a href="#">FRIENDS</a></li>
    <li><a href="#">CONTACT</a></li>

</ul>
CSS
Code:
/* =====  NAVIGATION LIST (placed in navcontainer) ===== */


div#navcontainer {
	position: absolute;
	top: 685px;
	left: 286px;
	background-color: #fff;
	width: 914px;
	height: 115px;
	padding: 0px;
	z-index: 1;
}


/* BEGIN SUCKERFISH MENU TEST CODE */
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav a {
	border: 0;
	color: #c69c69;
	background-color: fff;
	text-decoration: none;
	letter-spacing: 0.55em;
 	display: block;
	width: 9em;
	padding: 0 10px 0 20px;
}

#nav a:hover {
	border: 0;
	color: #fff;
	text-decoration: none;
	background-image: url(images/navHover.gif);
}

#nav li {
	float: left;
	width: 9em;
}

#nav li ul {
	position: absolute;
	width: 9em;
	left: -999em;
}

#nav li:hover ul {
	color: #fff;
	left: auto;
	border: 0;
	background-image: url(images/navHover.gif);
}
/*END SUCKERFISH MENU TEST CODE */
Any help is gratefully appreciated!