Try this revised code for your CSS:
#mainmenu{ position: relative; float: left; width: 150px; top: 50px; left: 20px; }
#mainmenu ul{ padding: 20px; margin: 20px; list-style: none; }
#mainmenu ul li{ position: relative; padding-bottom: 10px; }
#mainmenu ul ul { display: none; }
#mainmenu ul, #mainmenu ul ul{ padding: 0; margin: 0; }
#mainmenu ul a,
#mainmenu ul a:hover,
#mainmenu ul a:active,
#mainmenu ul a:visited{ text-decoration: none; font-weight: bold; padding-left: 15px; border-left: 2px solid #eee; }
#mainmenu ul li.current ul { display: block; position: relative; padding: 0 0 10px 10px; margin-left: 10px; }
#mainmenu li.current { color: #9F0040; margin: 0; }
#mainmenu a, #mainmenu li.current ul li a{ color: #fff; }
#mainmenu li.current a, #mainmenu li.current ul li.current a { color: #9f0040; padding-left: 15px; margin: 0; border-left: 2px solid #eee; }
I didn’t have a way to test it locally with the php setup like yours, but it is using borders on each <a> tag instead of the images, and works in FF and IE. You might need to tweek it a little bit for your liking.
Hope it helps and works for you!
