Css hover isn't working - html

Question

Here is my code. I made this - when I hover table cell then its background image changes, that was easy.
But I would like to make that when I hover cell 5 with class="down" in first table then second table display attribute changes from none to block
I searched for this and I ended up with all this code, and it isn't working.
I need to use pure CSS without JavaScript.
Where is the problem and what did I do wrong?
HTML
<table border="0" class="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td class="down">5</td>
</tr>
</table>
<table border="0" class="table2">
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
</table>
CSS
.table
{
left:200px;
position:absolute;
}
td
{
background-image:url(poga1.png);
height:70px;
width:100px;
}
td:hover
{
-webkit-transition:1s;
background-image:url(poga2.png);
}
.table2
{
display:none;
left:616px;
position:absolute;
top:77px;
}
.down:hover .table2
{
display:block;
}

Answer 1

You can't really do this with CSS unless Table2 is a child of Table1. It can be done very easily with JavaScript though (w/ jQuery in this instance). Check out my example here:
http://jsfiddle.net/Pb8dw/1/
$(document).ready(function() {
$(".down").mouseover(function(){
$(".table2").show();
});
$(".down").mouseout(function(){
$(".table2").hide();
});
});
This is the block of code that does the hide/show on hover. I took the liberty of updating your source code so it's easier to see.
Update: If you absolutely, positively, had to do it without JavaScript, here's how it would be down with just CSS and HTML:
http://jsfiddle.net/Pb8dw/2/

Answer 2

The line .down:hover .table2 is looking for an element with class table2 inside an element with class down. You can only do what you want in pure CSS if your tables are nested. Here's how you might do what you want using jQuery:
$(document).ready(function() {
$('.down').hover(function() {
$('.table2').show();
}, function() {
$('.table2').hide();
});
});
Here's a demo: http://jsfiddle.net/mchail/b6PKT/
I added a border on the td elements so it's easier to see when your hover event should trigger.