jQuery and selectors, I always seem to struggle.

jQuery and selectors, I always seem to struggle.

Heey there jQuery community :)

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): 

  1. <table>
  2. <tr>
  3. <th><a href="#">Info</a></th>
  4. </tr>
  5. <tr><td>Products</td></tr>
  6. <tr><td>Prices</td></tr>
  7. <tr><td>Location</td></tr>
  8. <tr><td>F.A.Q.</td></tr>
  9. </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:

  1. $(document).ready(function() {
  2. $("table").hover(function() {
  3. $(this).children().children().show();
  4. }, function() {
  5.       $(this).children().children().hide();
  6. });
  7. });
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!

Rien Heuver