CSS help with css menu in template, please

I'm an old-school html coder, and css isn't one of my strong points. I have the template almost to my liking, except for the menu. I could sure use some help in making it perfect.

Here's the nav css, with 6 "buttons". Most have plenty of room to spare, one is real tight. What I'd like help with is narrowing those with too much room, and adding 3 more, for a total of 9, but because one is tight now, it needs to remain wide, while 8 others narrow. Total of all "9", (although only 6 fit now) is now 744 x 31 I don't mind more total height, if that is the only way to get that big one to fit.

#nav {
width:744px;
height:31px;
margin: 2px 0px 2px 25px;
background-color:#a5cae5;
padding: 2px 4px 3px 0px;
}
#nav ul {
}
#nav li {
display:inline;
background-color:#245882;
width:112px;
height:31px;
float:left;
margin-left:2px;
text-align:center;
}
#nav a {
width:120px;
height:29px;
padding-top:2px;
text-decoration:none;
color:#a5cae5;
font-weight:800;
display:block;
}
#nav a:hover {
color:#FFFFFF;
font-weight:800;
}

Here's the temp home of the site. http://www.pantheus.com/fohl/

Can any of you gurus throw me a bone with a solution?

Thanks,

Ken

 

If you want less width, then change the width.

#nav {
width:550px;
height:31px;
margin: 2px 0px 2px 25px;
background-color:#a5cae5;
padding: 2px 4px 3px 0px;
}
#nav ul {
}
#nav li {
display:inline;
background-color:#245882;
width:112px;
height:31px;
float:left;
margin-left:2px;
text-align:center;
}
#nav a {
width:120px;
height:29px;
padding-top:2px;
text-decoration:none;
color:#a5cae5;
font-weight:800;
display:block;
}
#nav a:hover {
color:#FFFFFF;
font-weight:800;
}

 

One would have hoped that an answer to a simple question could have happened prior to FIFTEEN MONTHS passing. I figured this out long ago.. but maybe someone else can use the help...