I have a problem, which I hope you can solve.

I'm using jQuery this time to create a dropdown menu.

Here is my html code (partially, only the relevant part): 

2. <table>
3. <tr>
4. <th><a href="#">Info</a></th>
5. </tr>
6. <tr><td>Products</td></tr>
7. <tr><td>Prices</td></tr>
8. <tr><td>Location</td></tr>
9. <tr><td>F.A.Q.</td></tr>
10. </table>

Here is the relevant part of the css:

1. td {
2. display: none;
3. }

Now what I want should be obvious: When you hover the <th>, the other <td> should display, and onmouseout they should dissapear of course.

Here is the jQuery I came up with but which doesn't work so far:

2. $(document).ready(function() {
4. $("table").hover(function() {
5. $(this).children().children().show();
6. }, function() {
7.       $(this).children().children().hide();
8. });
10. });

The children() part probably doesn't make too much sense but I've accomplished many things spamming parents and children :P

Can someone please help me out by telling me how to properly select all the td's and showing them?

Thanks in advance!

Greets,

Rien Heuver