title: CSS drop down <ul> <li> menu different sizes of each level
body: <p>Hi I cannot figure out how to change the size of the child item of the CSS menu (The parent has an image background, the child should have a background color).
  I tried something like:</p>
  
  <pre><code>ul &gt; li &gt; a:hover {
      display:inline-block;
      background:#000;
      float:left;
      width:120px;
      height:25px;
  }
  </code></pre>
  
  <p>but it is all mixed with other elements. Can you please help me figure it out?</p>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;div id="menu"&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a id="menu1" href="#"&gt;Parent1&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;Parent2&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Child1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Child2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Child3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Parent3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Parent4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Parent5&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#menu {
      position:absolute;
      top:133px;
      left:0px;
      width:900px;
      height:50px;
  }
  ul {
      font-family: Arial, Verdana;
      font-size: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
  }
  ul li {
      display: block;
      float: left;
  }
  li ul {
      display: none;
  }
  ul li a {
      display: block;
      text-decoration: none;
      color: #ffffff;
      /*padding: 5px 15px 5px 15px;*/
      background-image: url(../images/menu1.png);
      white-space: nowrap;
      width:178px;
      height:50px;
  }
  ul li a:hover { 
      background: #BBBBBB;
  }
  li:hover ul {
      display: block;
      position: absolute;
      left:0px;
  }
  li:hover li {
      float: left;
      font-size: 11px;
  }
  li:hover a { 
      background: #3b3b3b; 
  }
  li:hover li a:hover {
      background: #CCC;
  }
  </code></pre>
  
  <p>Thank you very much for your help in advance!</p>