title: css: hover on the span in li tag
body: <p>what is wrong with my code? why when i hover on  tag, don't change background in  tag.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #menu ul{
      list-style-type: none;
      margin-left: 0px;
      padding-left: 0px;
      height: 33px;
  }
  #menu li{
      display: inline;
      margin-left: 5px;
      height: 33px;
  }
  #menu a{
      color: #336699;
      height: 33px;   
  }
  #menu a:hover{
      color: #FFFFFF;
      height: 33px;
      background:url(images/mid.gif);
  }
  #menu li .right{
      width: 20px;
  }
  #menu li .right:hover{
      width: 20px;
      background:url(images/right.png) no-repeat;
      background-position: left top;
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;div id="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href = ""&gt;One&lt;span class="right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = ""&gt;Two&lt;span class="right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = ""&gt;Three&lt;span class="right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = ""&gt;Four&lt;span class="right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>