CSS Menu issue in IE7

One more reason not to like IE...

I have been working on this website for my former choir on and off for months on a volunteer basis. For now, it is at http://web.mac.com/rachelf2/PCC1/
It isn't perfect but it is significantly better than the old site. It is this close to being done but I am having an issue with a menu not displaying properly in IE. I found a drop down menu template/tutorial (CSS Drop Down Menu tutorial at www.tanfa.co.uk by Suzy Campbell) that I just barely understand. It does exactly what I want in Safari and Firefox and Whatever:hover (by Peter Nederlof) makes it almost do everything is supposed to do in IE. The problem is that, only in IE, the menus that drop down over the sidebar area are transparent for some reason (though not on mouseover.) Also, the first menu (Singers Center) "dies" after the third box. The menus work fine over the body section. Any ideas on how to fix this?

Also, just a note, I just downloaded the beta of IE 8 and this problem doesn't happen anymore. Not that this helps too much at this point.

 

My coding had definitely gotten a little sloppy (I should have known someone was going to call me on it!) but it was mostly a case of using <br> instead of <br/>. I did just fix it up and now it validates fine. I'll do all the other pages tonight, but if I can figure it out on the home page, I can make it work everywhere.

I'll also try this other menu tonight if no one can figure out the problem with this one first. When I was first looking at menus, this was just the one I understood the best (probably because I learned HTML pre-2005) but I think this one looks similar enough that I just might be able to make it work.

 

And the winner is....

Zlinuk!

How I came to the solution:
I duplicated part of my site and started working on replacing the menu with the menu SrWebDeveloper suggested. I was replacing a couple of things in the CSS as a time and verifying that it still did what I wanted it to do. As soon as I started playing with the Javascript (and realized I had no clue what I was doing,) trying to remove the time delay and the arrows, unsuccessfully I might add, I had the same transparent menu problem but in Safari as well. I decided to abandon that for now and try Zlinuk's solution and the problem was solved!

I am still using outdated code I know, but I need to learn a little bit more about Javascript so I can learn how to modify it to do what I want it to do (no arrows and no time delay.) I promise to learn that eventually, but for now, it works! Thanks for your help!