Css on a couple changes the background for children

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

Everything is fine and working, but what I want to do is when the user points to the list item, that the div should change its background, and each div should change to a different color, so I need something like:

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

But now I’m just trying to choose another one inside this div that doesn’t exist, well, anyway, I hope you get this idea, also here is the js fiddle: http://jsfiddle.net/xShBB/