CSS subclasses and javascript menu.. What am I doing wrong?

[Expunge]

So in my CSS sheet, I have the following:


#drop {
width: 90px;
top: 133px;
position: absolute;
font-size: 10px;
font-family: Arial;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 5px;
background: #fefefe;
color: #333333;
border: solid black 1px;
line-height: 1.1;
}
#drop.about {
left: 0px;
}



Now what I want to do is to block the property "display: none" so the menu will show. This is using javascript, and (part) of this line:


onMouseOver="document.all.drop.about.style.display='block'"

When I roll over it, I receive the error: "document.all.drop.about.style.display" is null or not an object.

What am I doing wrong? Is javascript even capable of this? Is there a cleaner way to do this with CSS? Any other possible method?

I'm starting to think I've specified my subclasses wrong in my .css file.. IE doesn't display the menu correctly.. It just bunches them all up on the left side of the screen. Firefox spaces them out properly though..

and then the menu works with neither. :S

before I added subclasses (To cut down on clutter in the CSS file basically) the menu worked great! Now it doesn't work in either IE or Firefox.

Link to page here (http://www.the412icompany.com/menu/index2.html)

[BonRouge]

Had you considered using a Suckerfish (http://www.htmldog.com/articles/suckerfish/) menu? I really think you should.

[Expunge]

Had you considered using a Suckerfish (http://www.htmldog.com/articles/suckerfish/) menu? I really think you should.
I haven't even heard of it. I will look into it though. Thanks!