title: CSS: different <li> parent-child backgrounds and sizes
body: <pre><code>&lt;div class="menu3" &gt;
   &lt;ul class="cssMenu"&gt;   
    &lt;li&gt;
     &lt;a href="#"&gt;Parent&lt;/a&gt;       
      &lt;ul class="cssMenuA"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Child1&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Child2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Child3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  
  .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></pre>
  
  <p>I would like to make my <strong>Parent</strong> <code>ul/li</code> and <strong>child</strong> <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.  </p>
  
  <p><em>I hope you understand my problem and hope to help me out with this issue. Thank you in advance.</em></p>