Css on hover change child background

Question

I have a menu:

<ul class="menu">
   <li><div class="home"></div> Home</li>
   <li><div class="forum"></div> Forum</li>
   <li><div class="music"></div> Music</li>
</ul>

And this css:

.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;}

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:

.home li:hover{
   background-color:brown;
}

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: http://jsfiddle.net/xShBB/

Answer 1

You almost had it!

li:hover .home {
   background-color:brown;
}

The CSS is always applied to the element on the outermost right of the selector (unless we see support for the parent selector sometime in the future). So your selected div has to be on the right of the selector, whereas the li:hover as its parent has to be on its left.

Your fiddle edited.