[thelist] Pulldown Menu Not Lining Up

[Rachell Coe]

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.com/Classes/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, corresponding 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!!!

Rachell Coe
4 the Grapes
http://www.4theGrapes.com

Web Design, Marketing & Photography
for Small, Boutique and Micro Wineries