Css hovering link show table - html

Question

So I am trying to make a dropdown menu where when hovering a link. A table is shown underneath the link. I don't understand why it wont work. Check out the fiddle link.
FIXED LINK
http://jsfiddle.net/ThobiasN/Pt3db/
Html code example:
<a class='nav' href='#'>Hover me</a>
<table>
<tr>
<td class='dropdown'><p>Show me</p></td>
</tr>
</table>
Css code example:
td.dropdown
{
display:none;
}
a.nav:hover > table
{
display:block;
}

Answer 1

Because the table isn't a child of the link.
The sign > in CSS is equivalent to "direct child of"
Try to put the table inside of the link.

Answer 2

<table> is a sibling to link element. Use + for operating over the sibling.
a.nav + table {
display: none;
}
a.nav:hover + table {
display: block;
}

Answer 3

I think at the end you would need to use some Javascript code to achieve that, but what you are doing wrong is this:
> simbol is for direct child
You want to set display: none for the table element, not the td
Solution:
change the > symbold for this one: + to get the next element
change a little bit your css
HTML
<a class='nav' href='#'>Hover me</a>
<table>
<tr>
<td class='dropdown'><p>Show me</p></td>
</tr>
</table>
CSS
table{
display:none;
}
a.nav:hover + table{
display:block;
}
JSFiddle
http://jsfiddle.net/Pt3db/5/
Plus advices
Use an unordered list instead table (table for tabular data)
You wouldn't be able to click on the subnav elements, so that's why I think you would need some Javascript
Out there are a lot of good navigation plugins that you can use, don't reinvent the wheel at least you are learning ;)

Answer 4

a.nav:hover > table means that table should be inside a.nav. First of all don't use table here, use ul better and put it inside a.nav
<a class='nav' href='#'>Hover me
<ul>
<li>Show me</li>
</ul>
</a>

Answer 5

This is the proper way to do it, CSS:
a.nav + table tr td.dropdown
{
display:none;
}
a.nav:hover + table tr td.dropdown
{
display:block;
}
You need to hide and show the same element, if you hide a table, don't show a TD, and vice versa
Alternatively, show and hide table instead of TD, CSS:
a.nav + table
{
display:none;
}
a.nav:hover + table
{
display:block;
}
One more thing to keep in mind, + refers to sibling elements, > refers to direct child

Answer 6

Working with css Fiddle
It seems to work either way but here is the way that I prefer
even though it's not css:
$('.nav').hover(function () {
$('table').css('display', 'block');
});
table{
display:none;
}

Answer 7

HTML Code
<a class='nav' href='#'>Hover me </a>
<table class='dropdown'>
<tr>
<td ><p>Show me</p></td>
</tr>
</table>
CSS Code
table.dropdown
{
display:none;
}
a.nav:hover + table
{
display:block;
color: green;
}