css horizontal nav menu doesn't space right

[lindagal2]

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 (http://www.kitchenprose.com/gmtest/index-test.html)

Here is the pertinent code:

HTML
<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
/* ===== 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!

[Fang]

/* 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: 122px; /*9em;*/
padding: 0 10px 0 20px;
}

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

#nav li {
float: left;
width: 152px; /*9em;*/
}

#nav li ul {
position: absolute;
width: 180px; /*9em;*/
left: -999em;
}
#nav li ul a {width: 180px;} /* added */

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