HELP: Nice Menus: main menu tab as image, submenu links each change color

Hi,

I would like my main menu tab to be an image and the sub-menus to have a different background when they are hovered over or selected.

The menu is 84.
i placed nice_menu_default.css in my theme menu themes ".info" file
stylesheets[all][] = nice_menus_defaults.css
renamed nice_menu_default.css to another file so there would not be a naming conflict

My css does not work and I can't figure out why.
I am not quite sure how to have the top menu be a picture

ul.nice-menu li#menu-84{
background-image: url(images/events.png); //image for the main tab
background-position: 0px 0px;
padding: 0px;
height: 30px;
width: 106px; // note: width: auto or height:auto don't seem to work
// text-indent: -5000px;
}

// When there is a link or the page was visited, then the link text would have a white color on a specific background color
ul.nice-menu li#menu-84 a:link,
ul.nice-menu li#menu-84 a:visited {
color:#ffffff;
background: #DD6725;

}

// when I hover, over a link or select it, I would like the box to have different colors and the text to grow larger

ul.nice-menu li#menu-84 a:hover,
ul.nice-menu li#menu-84 a:active{
font-weight: bold;
font-size: 125%;
background: #000000;
color:#ffffff;

}

I would really appreciate anyone's help in trying to figure this out. I am stuck and can't figure out why.

Thanks
C