Hi All! I have coded a css pulldown menu using li tags and even though I've successfully coded pulldown menus before (and the pulldown part for this is working), for some reason can't get this one to line up correctly!!! It's driving me NUTS!

You can see what I've done at http://theportlandballet.4thegrapes....sses/index.htm. How its supposed to work is the nav link is supposed to be centered under each squared picture, and the pulldown box is supposed to align to the right and left of the squared picture above it. Each <li> is supposed to be 150px with a 10px right margin so it will line up with the above, coorisponding square picture, but after the first one, all the rest are too far to the left. Anyone have any ideas what the problem is?

The css is at http://theportlandballet.4thegrapes.com/main.css and here is the specific css coding (in case you don't want to follow the link):
#navigation {
margin: 0px;
padding: 0px;
}
#navigation ul {
padding-bottom: 5px;
margin: 0px;
width: 970px;
}
#navigation li {
text-align: center;
list-style-type: none;
float: left;
}
#navigation li a:link {
color: #FFFFFF;
text-decoration: none;
width: 150px;
display: block;
margin-right: 10px;
margin-bottom: 5px;
}
#navigation li a:visited {
color: #FFFFFF;
text-decoration: none;
width: 150px;
display: block;
margin-right: 10px;
margin-bottom: 5px;
}
#navigation li a:hover {
color: #FFCC33;
text-decoration: none;
width: 150px;
display: block;
margin-right: 10px;
margin-bottom: 5px;
}
#navigation li ul {
display: none;
height: auto;
width: auto;
color: #000000;
}
#navigation li ul li {
float: none;
width: 150px;
display: block;
line-height: 1em;
color: #FFFFFF;
padding: 5px;
background-color: #000000;
text-align: left;
}
#navigation li ul li a {
padding: 3px;
height: auto;
color: #FFFFFF;
text-align: left;
text-decoration: none;
font-size: 9pt;
}
#navigation li:hover ul {
display: block;
position: absolute;
background-image: none;
}
#navigation li ul li a:visited {
color: #FFFFFF;
text-decoration: none;
font-size: 9pt;
}
#navigation li ul li a:hover {
text-decoration: none;
font-size: 9pt;
}

And here is the html coding for the navigation area:
<div align="center" id="navigation"><ul><li><a href="/Classes/index.htm">CLASSES</a><ul><li><a href="/Classes/UpcomingAuditions.htm">Upcoming Auditions</a></li><li><a href="/Classes/CurriculumBalletProgram.htm">Curriculum Program</a></li><li><a href="/Classes/OpenBalletforAdults.htm">Open Ballet For Adults</a></li><li><a href="/Classes/CreativeBallet.htm">Creative Ballet</a></li><li><a href="/Classes/MastersWorkshops.htm">Masters Workshop</a></li><li><a href="/Classes/YoungDancerSummer.htm">Young Dancer Summer</a></li><li><a href="/Classes/SummerBalletIntensive.htm">Summer Ballet Intensive</a></li><li><a href="/Classes/BeginningBalletSeries.htm">Beginning Ballet Series</a></li><li><a href="/Classes/StudioCalendar.htm">Studio Calendar</a></li></ul></li><li><a href="/Company/index.htm">COMPANY</a><ul><li><a href="/Company/PhotosVideo.htm">Photos/Video</a></li><li><a href="/Company/Repertory.htm">Repertory</a></li><li><a href="/Company/CompanyMembers.htm">Company Members</a></li><li><a href="/Company/PressReleases.htm">Press Releases</a></li></ul></li><li><a href="/Tickets/index.htm">TICKETS</a></li><li><a href="/About/index.htm">ABOUT</a><ul><li><a href="/About/Contact.htm">Contact</a></li><li><a href="/About/Instructors.htm">Instructor Bios</a></li><li><a href="/About/PressReleases.htm">Press Releases</a></li></ul></li><li><a href="/Support/index.htm">SUPPORT</a></li><li><a href="/Outreach/index.htm">OUTREACH</a></li></ul></div>

TIA!!!