title: Css on hover change child background
body: <p>I have a menu:</p>
  
  <pre><code>&lt;ul class="menu"&gt;
     &lt;li&gt;&lt;div class="home"&gt;&lt;/div&gt; Home&lt;/li&gt;
     &lt;li&gt;&lt;div class="forum"&gt;&lt;/div&gt; Forum&lt;/li&gt;
     &lt;li&gt;&lt;div class="music"&gt;&lt;/div&gt; Music&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And this css:</p>
  
  <pre><code>.menu{
     list-style:none;
     width:100px;
     border:1px solid #ccc;
     padding:0px;
     margin:0px;
  }
  
  .menu li{
     height:20px;
     margin-top:5px;
     padding-left:10px;
  }
  
  .menu li div{
      display:inline-block;
      width:10px;
      height:10px;
  }
  
  .menu li:hover{
     background-color:green;
  }
  
  .home{background-color:black;}
  .forum{background-color:red;}
  .music{background-color:yellow;}
  </code></pre>
  
  <p>It's all nice and working, but what i want to do is when user hovers on list item that div should change it's background, and each div should change to a different collor, so i need something like:</p>
  
  <pre><code>.home li:hover{
     background-color:brown;
  }
  </code></pre>
  
  <p>But now im just trying to select another li inside that div which doesn't exist, well anyways i hope you get the idea, also here is js fiddle: <a href="http://jsfiddle.net/xShBB/" rel="noreferrer">http://jsfiddle.net/xShBB/</a></p>