CSS: different <li> parent-child backgrounds and sizes

[harpdoter]

\[code\]<div class="menu3" > <ul class="cssMenu"> <li> <a href="http://stackoverflow.com/questions/15710443/#">Parent</a> <ul class="cssMenuA"> <li><a href="http://stackoverflow.com/questions/15710443/#"><span>Child1</a></span></li> <li><a href="http://stackoverflow.com/questions/15710443/#"><span>Child2</span></a></li> <li><a href="http://stackoverflow.com/questions/15710443/#"><span>Child3</span></a></li> </ul> </li> </ul></div>.menu3 {background: url(../images/menu3.png) no-repeat;float:left;width:134px;height:50px;}.menu3 a:hover {background: url(../images/menu3-hover.png) no-repeat;float:left;width:134px;height:50px;} ul.cssMenuA ul li { float:left; background: #FFA900; width: 90px; height:25px; display: inline; } ul.cssMenuA ul li a { background: #FFA900; width: 90px; height:25px; display: block; font-family: Arial, Times New Roman, Tahoma; font-size: 14px; color:#000000; } ul.cssMenuA ul li a:hover{ background: #FFA900; width: 90px; height:25px; display: inline; font-family: Arial, Times New Roman, Tahoma; font-size: 14px; color:#FFF; }\[/code\]I would like to make my Parent \[code\]ul/li\[/code\] and child \[code\]ul/li\[/code\] to have different, but fixed sizes. I have defined a background image for my Parent item \[code\]class="menu3"\[/code\], but I want a different non-image Child1, 2 and 3 \[code\]class="cssMenuA"\[/code\]. But the children are using also the image, as the parent item. I hope you understand my problem and hope to help me out with this issue. Thank you in advance.