Hi Guys! New here..

I need some help.. ASAP
(for some people with good heart out there and for the experts)

I have these two images for the menu, with a rounded corner.
It's in .png format and has transparency so that whenever I wanted to change the background, I dont have to go edit the menu.



The only problem is that, when I tried to do that using the tutorials I found in some threads here, the img02 will overlay the img01 which will result to straight edge, instead of the rounded corner I wanted to achieve.

Here is the code that I used:

#navmenu li:hover,
#navmenu li.iehover,
#navmenu li.active{
background: url(../images/img01.png) right center no-repeat;

}
#navmenu li:hover a,
#navmenu li.iehover a,
#navmenu li.active:hover a,
#navmenu li.active.iehover a,
#navmenu li a:hover,
#navmenu li.active a,
#navmenu li.active a:hover{
background: url(../images/img02.png) left center no-repeat;
Note: Attached files are the menu images.

I would be very glad for people who will help me with this.
I will be waiting....

May you have a good day!